متفاوت ترین مجله اینترنتی ...

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

7

در جلسه قبل ساخت يک انيميشن توسط 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. محمد نصیری می‌گوید

    علی جان ادامه بده من یکی که دارم استفاده میکنم و لذت میبرم

  2. emperor می‌گوید

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

    1. علی پامناري می‌گوید

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

  3. amir8 می‌گوید

    ایا میشه به جای یک مربع قرمز یک عکس قرار داد؟
    ممنون میشم جواب بدین.

    1. ali می‌گوید

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

  4. ali می‌گوید

    با تشکر از آموزش تون
    اگر ممکنه در زمینه استاندارد های وب در css3 آموزش بذارید

  5. آفاق وب می‌گوید

    ممنون

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.

در جلسه قبل ساخت يک انيميشن توسط CSS3  را ياد گرفتيم حال در اين جلسه مي خواهيم انيميشن خود را کنترل کنيم.   animation-play-state تبلیغات […]