در جلسه قبل ساخت یک انیمیشن توسط CSS3 را یاد گرفتیم حال در این جلسه می خواهیم انیمیشن خود را کنترل کنیم.


animation-play-state

ویژگی بالا این امکان را به ما دهد که انیمیشن خود را متوقف یا اجرا کنیم.

animation-play-state: paused|running;
اگر مقدار دستور بالا را برابر با paused قرار دهیم انیمیشن خود را متوقف کرده و اگر مقدار آن را running قرار دهیم انیمشن ما اجرا می شود.

یک صفحه درست کردم که بهتر مفهوم و کارایی animation و animation-play-state را متوجه بشوید.

یک مثال دیگر برای یادگیری بهتر:

خوب می خواهیم یک انیمیشن ایجاد کنیم که وقتی که نشانه گر موس را روی تصویر مورد نظر برده تصویر چند دور بچرخد و رنگ پس زمینه و رنگ متن تغییر کند.

۰۱ div{
02 -moz-transition: all 1s ease-in-out 0s;
03 -webkit-transition: all 1s ease-in-out 0s;
04 position:relative;
05 background:red;
06 width:100px;
07 height:70px;
08 margin:200px auto;
09 text-align:center;
11 font-family:Tahoma;
11 text-align:center;
12 padding-top:30px;
13 }
۱۴ div:hover {
15 background-color: #03F;
16 color: #fff;
17 transform: rotate(360deg) scale(1.5);
18 -moz-transform: rotate(360deg) scale(1.5);
19 -webkit-transform: rotate(360deg) scale(1.5);
20 }