اجرای یک افکت css هنگام کلیک روی دکمه

سلام دوستان عزیز
سوالم از عنوان موضوع مشخصه
میخوام وقتی روی دکمه یا تصویری کلیک میکنم یه افکت css اجرا بشه
این کار امکان پذیر هست؟

سلام
بفرما عزیز
البته این کد css روی کروم کار میکنه فقط برای مثال گذاشتم که نحوه استفاده رو بدونید خودتون میتونید تغییرش بدید

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.classname {
-webkit-animation-name: cssAnimation;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
from {
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
}
to {
-webkit-transform: rotate(3240deg) scale(5) skew(0deg) translate(0px);
}
}
</style>
  <script type="text/javascript">
        function ani(){
            document.getElementById('img').className ='classname';
        }
  </script>
<title>Untitled Document</title>
</head>

<body>
<p>&nbsp;</p>
<p>
  <input name="" value="Run Effect" type="button" onclick="ani()" /> 
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center"><img id="img" src="http://www.softafzar.net/customavatars/avatar119_1.gif" width="70" height="70" /></p>
</body>
</html>

خیلی ممنونم
دقیقا همینو میخواستم :44:

اجرای یک افکت css هنگام کلیک روی دکمه

سوال برنامه نویسی دارید؟

خوش آمدید