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

 

animation-play-state

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

animation-play-state: paused|running;

اگر مقدار دستور بالا را برابر با paused قرار دهيم انيميشن خود را متوقف کرده و اگر مقدار آن را running قرار دهيم انيمشن ما اجرا مي شود.

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

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

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

01 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 }
14 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 }

پيش نمايش مثال