در جلسه قبل ساخت یک انیمیشن توسط CSS3 را یاد گرفتیم حال در این جلسه می خواهیم انیمیشن خود را کنترل کنیم.
animation-play-state
ویژگی بالا این امکان را به ما دهد که انیمیشن خود را متوقف یا اجرا کنیم.
[css]
animation-play-state: paused|running;
[/css]
اگر مقدار دستور بالا را برابر با paused قرار دهیم انیمیشن خود را متوقف کرده و اگر مقدار آن را running قرار دهیم انیمشن ما اجرا می شود.
یک صفحه درست کردم که بهتر مفهوم و کارایی animation و animation-play-state را متوجه بشوید.
یک مثال دیگر برای یادگیری بهتر:
خوب می خواهیم یک انیمیشن ایجاد کنیم که وقتی که نشانه گر موس را روی تصویر مورد نظر برده تصویر چند دور بچرخد و رنگ پس زمینه و رنگ متن تغییر کند.
[css]
div{
-moz-transition: all 1s ease-in-out 0s;
-webkit-transition: all 1s ease-in-out 0s;
position:relative;
background:red;
width:100px;
height:70px;
margin:200px auto;
text-align:center;
font-family:Tahoma;
text-align:center;
padding-top:30px;
}
div:hover {
background-color: #03F;
color: #fff;
transform: rotate(360deg) scale(1.5);
-moz-transform: rotate(360deg) scale(1.5);
-webkit-transform: rotate(360deg) scale(1.5);
}
[/css]
