طراحی سایت در کرج|شرکت طراحی سایت|سئو در کرج|طراحی اپلیکشن موبایل

برای مشاهده بخش خدمات طراحی سایت به سمت پایین اسکرول کنید

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

آموزش انیمشن در cssReviewed by مهدی اخوان on Aug 17Rating:

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

Source code آموزش انیمشن در css آموزش انیمشن در css آموزش انیمشن در css 
@keyframes animatname {
    ۰% {css-styles;}
    ۵۰% {css-styles;}
    ۱۰۰% {css-styles;}
}

 

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

@keyframes animatname {
    ۰% {background: blue;}
    ۵۰% {background: red;}
    ۱۰۰% {background: green;}
}
برای فراخوانی این انیمیشن باید کد زیر رو به کلاس یا آی دی اضافه کنید (این کد نیز باید برای webkit نوشته شود) :
Source code آموزش انیمشن در css آموزش انیمشن در css آموزش انیمشن در css 
animation:animname 5s infinite;
حال همان مثال بالا را به صورت کامل:
Source code آموزش انیمشن در css آموزش انیمشن در css آموزش انیمشن در css 
@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;
}
مطالب مرتبط

FOLLOW US