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

آموزش انیمشن در 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
  مشترک ها  
به من اطلاع بده
گفتگو از طریق واتس آپ