در جلسه قبل ساخت یک انیمیشن توسط 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 }
رای دهندگان
بهترین آموزش های برنامه نویسی
توسط فرخ ابراهیمی نژاد مدیر موسس لینک پددوره های در حال ثبت نام
ورود به جشنواره و دیدن تمام دوره ها
دورهی نخبهی طراحی و برنامه نویسی وب
دوره ی آموزشی 0 تا 100 php و mysql
آموزش برنامه نویسی برای نوجوانان دوره از راه دور و آنلاین
آموزش SEO
دیدگاهتان را بنویسید