گروپ دیزاین | ارائه دهنده خدمات نوین

آموزش انیمشن در css

 11 مرداد 1394
آموزش انیمشن در css
لطفا به این مطلب رای بدهید.

یکی از ساده ترین روش های زیبا سازی سایت استفاده از انیمیشن در آن است اما این کار باعث سنگین شدن سایت میشود. اما با استفاده از CSS شما میتوانید انیمیشن هایی سبک ایجاد کنید.
قاعده کلی کد به صورت زیر است (animname نام انیمیشنی است که مسازید) :

[codesyntax lang=”php”]

[/codesyntax]

 

شما میتوانید به تعداد زیادی استایل را در زمان های مختلف ایجاد کنید. در کد بالا من فقط در سه زمان کاری را انجام میدهم. در مقابل هر قسمت باید کد سی اس اس مورد نظر رو بنویسیم.
برای مثال شما میخواهید رنگ زمینه ابتدا آبی، سپس قرمز و در پایان سبز باشد باید کد را به صورت زیر بنویسیم:

@keyframes animatname {
    ۰% {background: blue;}
    ۵۰% {background: red;}
    ۱۰۰% {background: green;}
}
برای فراخوانی این انیمیشن باید کد زیر رو به کلاس یا آی دی اضافه کنید (این کد نیز باید برای webkit نوشته شود) :
[codesyntax lang=”php”]

[/codesyntax]
حال همان مثال بالا را به صورت کامل:
[codesyntax lang=”php”]

[/codesyntax]

دیدگاه بگذارید

avatar
  Subscribe  
Notify of