فریم های کلیدی CSS

با بخش فریم های کلیدی CSS آشنا می شوید.

فریم های کلیدی CSS چیست؟

در طول یک انیمیشن CSS ، یک ظاهر طراحی شده برای یک عنصر می تواند چندین بار تغییر کند. بنابراین ، هر زمان که در حال ایجاد یک انیمیشن هستید ، باید نقاط مشخصی به نام keyframes را تعریف کنید که در آن عنصر باعث تغییر سبک می شود.

برای تعیین کد انیمیشن ، باید از قانون CSSkeyframes استفاده کنید:

@keyframes animate {
    0%   {top: 0px; left: 0px; background: blue;}
    25%  {top: 0px; left: 100px; background: green;}
    50%  {top: 100px; left: 100px; background: red;}
    75%  {top: 100px; left: 0px; background: black;}
    100% {top: 0px; left: 0px; background: grey;}
}

تحلیل فریم های کلیدی در CSS

شرایط تحلیل استفاده از قانون CSSkeyframes به شرح زیر است:

نام انیمیشن{keyframes {keyframe {css-styles؛}

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

• با استفاده از درصد (0٪ برای شروع و 100٪ برای نقطه پایان انیمیشن):

/* Opera, Chrome, Safari */ 
@-webkit-keyframes animate {
    0%   {top: 0px; background: green; width: 100px;}
    100% {top: 200px; background: black; width: 300px;}
}  
/* Standard syntax */
@keyframes animate {
    0%   {top: 0px; background: green; width: 100px;}
    100% {top: 200px; background: black; width: 300px;}
}

با استفاده از کلمات کلیدی (از ابتدا و تا نقطه پایان انیمیشن):

/* Opera, Chrome, Safari */ 
@-webkit-keyframes animate {
    from {bottom: -100px;}
    to {bottom: 500px;}  	
}  
/* Standard syntax */ 
@keyframes animate {
    from {bottom: -100px;}
    to {bottom: 500px;} 
}

برای اطمینان از پشتیبانی مطلوب مرورگر از فریم های کلیدی خود ، باید انتخاب کنندگان 0٪ و 100٪ را انتخاب کنید:

/* Chrome, Safari, Opera */ 
@-webkit-keyframes animate {    
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px;}
    100% {top: 100px;}
}  
/* Standard syntax */ 
@keyframes myturn {
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px;}
    100% {top: 100px;}
}	

پشتیبانی از مرورگرها

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.