آموزش CSS3 (جلسه دوم)

آموزش CSS3 (جلسه دوم)
  • 1390/8/12
  • علی پامناري
  • 7
  • 788

در جلسه قبل ساخت يک انيميشن توسط 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 }

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

دیدگاه خود را وارد کنید
تعداد دیدگاه ها : 7 دیدگاه
  1. سلام ! آموزشتون حرف نداره ، اما یه درخواست دارم ! اینکه از آموزشهاتون نسخه های pdf برای دانلود هم قرار بدین . در ضمن اینو به بقیه ی دوستانتون که در سایت مطلب آموزشی میزارن هم منعکس کنین! بازم ممنون .

    1. سلام دوست عزیز ممنون.وقتی کل دروره آموزشی به اتمام رسید از کل جلسه ها PDF تهیه می شود.

    1. بله میشه شما میتونین در باکس قرارش بدین یا اینکه بصورت پس زمینه تعریفش کنین

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *