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

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

 2 آگوست 2015

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

[codesyntax lang=”php”]

@keyframes animatname {
    ۰% {css-styles;}
    ۵۰% {css-styles;}
    ۱۰۰% {css-styles;}
}

[/codesyntax]

 

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

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

[/codesyntax]

حال همان مثال بالا را به صورت کامل:
[codesyntax lang=”php”]
@keyframes animatname {
    ۰% {background: blue;}
    ۵۰% {background: red;}
    ۱۰۰% {background: green;}
}
@-moz-keyframes animatname {
    ۰% {background: blue;}
    ۵۰% {background: red;}
    ۱۰۰% {background: green;}
}
@-webkit-keyframes animatname {
    ۰% {background: blue;}
    ۵۰% {background: red;}
    ۱۰۰% {background: green;}
}
 
.
.
.
 
.class {
    animation:animname 5s infinite;
}

[/codesyntax]