انیمیشن در CSS

انیمیشن های CSS اجازه می دهد بسیاری از عناصر HTML بدون استفاده از جاوا اسکریپت یا فلش  را ایجاد کنید

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

اعداد در جدول اولین نسخه مرورگر را مشخص می کند که به طور کامل از این ویژگی پشتیبانی می کند.
اعداد که به دنبال آن -webkit-، -moz-، یا -o اولین نسخه ای که با یک پیشوند کار کرد را مشخص می کند.

CSS Animations

انیمیشن CSS چیست؟

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

قانون keyframes@

هنگامی که سبک CSS را در قوانینkeyframes@ مشخص می کنید، انیمیشن به تدریج از زمان فعلی به سبک جدید تغییر می کند.
برای گرفتن انیمیشن برای کار، باید انیمیشن را به یک عنصر مرتبط کنید.
مثال زیر تصویر انیمیشن "مثال" را به عنصر <div> متصل می کند. انیمیشن به مدت 4 ثانیه ادامه خواهد داشت و رنگ پس زمینه <div> از «قرمز» به «زرد» تغییر خواهد کرد:

قانون keyframes
 /* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
.div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
} 
مشاهده مثال

نکته: animation-duration مدت زمان انیمیشن را برای تکمیل تعریف می کند. اگر برای مشخصه animation-duration زمان مشخص نشده باشد، هیچ animation رخ نخواهد داد، زیرا مقدار پیش فرض 0s (0 ثانیه) است.
در مثال بالا زمانی مشخص شد که سبک با استفاده از کلمات کلیدی " from" و " to" (که 0٪ (شروع) و 100٪ (کامل)) را تغییر می دهد.
همچنین ممکن است از درصد استفاده کنید. با استفاده از درصد، شما می توانید تغییرات سبک به همان اندازه که شما می خواهید اضافه کنید.
مثال زیر، رنگ پس زمینه عنصر <div> را هنگامی که انیمیشن 25٪ کامل است، 50٪ تکمیل می کند و دوباره هنگامی که انیمیشن 100٪ کامل است، تغییر می دهد:

تغییر رنگ
 /* The animation code */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* The element to apply the animation to */
.div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
} 
مشاهده مثال

مثال زیر هر دو رنگ پس زمینه و موقعیت عنصر <div> را هنگامی که انیمیشن 25٪ کامل است، 50٪ تکمیل می کند و دوباره هنگامی که انیمیشن 100٪ کامل است، تغییر دهید:

تغییر رنگ در حرکت
 /* The animation code */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
.div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
} 
مشاهده مثال

تاخیر در انیمیشن

ویژگی های animation-delay، یک تاخیر برای شروع یک انیمیشن مشخص می کند.
مثال زیر تا قبل از شروع انیمیشن تاخیر 2 ثانیه است:

تاخیر در انیمیشن
.div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}
مشاهده مثال

مقادیر منفی نیز مجاز می باشند. اگر با استفاده از مقادیر منفی، انیمیشن شروع می شود همانطور که قبلا برای N ثانیه حرکت کرده است.
در مثال زیر، انیمیشن شروع می شود همانطور که در حال حاضر برای 2 ثانیه حرکت می کند:

تاخیر 2 ثانیه
.div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: -2s;
}
مشاهده مثال

تنظیم اجرای چندین بار انیمیشن

animation-iteration-count تعداد دفعاتی که یک انیمیشن باید اجرا شود مشخص می کند.

مثال زیر انیمیشن قبل از اینکه متوقف شود، 3 بار اجرا شود

تنظیم اجرای چندین بار انیمیشن
.div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}
مشاهده مثال

مثال زیر از مقدار "بی نهایت" برای ایجاد انیمیشن برای همیشه استفاده می کند:

3 بار اجرا
.div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
مشاهده مثال

اجرای انیمیشن در جهت معکوس یا چرخه های متناوب

ویژگی animation-direction مشخص می کند که آیا انیمیشن باید به جلو، عقب و یا در چرخه های متناوب پخش شود.

جهت حرکت انیمیشن می تواند مقادیر زیر را داشته باشد:

normal – انیمیشن به صورت طبیعی (به جلو) حرکت داده می شود. این پیش فرض است

reverse – انیمیشن در جهت معکوس (به عقب)

alternate – انیمیشن برای اولین بار پخش می شود، و سپس به عقب

alternate-reverse – انیمیشن برای اولین بار پخش می شود و سپس به جلو می رود

مثال زیر انیمیشن را در جهت معکوس (عقب) اجرا می کند:

اجرای انیمیشن در جهت معکوس
.div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-direction: reverse;
}
مشاهده مثال

مثال زیر از مقدار "متناوب" استفاده می کند تا انیمیشن ابتدا به سمت جلو حرکت کند و سپس به عقب برگردد:

جهت معکوس
.div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 2;
    animation-direction: alternate;
}
مشاهده مثال

مثال زیر از مقدار "متناوب و معکوس" استفاده می کند تا انیمیشن ابتدا به عقب برگردد و سپس به جلو برود:

متناوب
.div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 2;
    animation-direction: alternate-reverse;
}
مشاهده مثال

منحنی سرعت انیمیشن را مشخص کنید

ویژگی animation-timing-function منحنی سرعت انیمیشن را مشخص می کند.

ویژگی animation-timing-function می تواند مقادیر زیر را داشته باشد:

Ease - یک انیمیشن را با شروع آهسته، سپس سریع، و سپس به آرامی پایان می دهد (این به طور پیش فرض است)

Linear - یک انیمیشن با همان سرعت را از ابتدا تا انتها مشخص می کند

ease-in - یک انیمیشن با یک شروع آهسته را مشخص می کند

ease-out - انیمیشن با پایان آهسته را مشخص می کند

ease-in-out - یک انیمیشن را با شروع و پایان آهسته مشخص می کند

cubic-bezier(n,n,n,n) - به شما امکان می دهد که مقدار های خود را در یک عملکرد مکعبی تعریف کنید

مثال زیر نشان می دهد برخی از منحنی های سرعت متفاوت است که می تواند مورد استفاده قرار گیرد:

منحنی سرعت انیمیشن
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
مشاهده مثال

حالت fill برای انیمیشن را مشخص کنید

انیمیشن CSS بر یک عنصر قبل از اولین فریم keyframe یا بعد از آخرین فریم keyframe تأثیر نمی گذارد. خصوصیات anim-fill-mode میتواند این رفتار را برطرف کند.

ویژگی animation-fill-mode یک سبک را برای عنصر هدف مشخص می کند وقتی که انیمیشن پخش نمی شود (قبل از شروع آن، پس از پایان دادن، یا هر دو).

ویژگی anim-fill-mode می تواند مقادیر زیر را داشته باشد:

None مقدار پیش فرض. انیمیشن قبل و بعد از اجرا هیچ سبک خاصی برای آن اعمال نمی شود

Forwards این عنصر ارزش های سبک را که توسط آخرین keyframe تعیین می شود (به جهت حرکت و انیمیشن-تکرار شمارش) بستگی دارد.

backwards این عنصر مقادیر سبک را که توسط اولین keyframe تعیین شده (بستگی به جهت حرکت انیمیشن) تعیین می کند، دریافت می کند و در طول مدت زمان تاخیر انیمیشن حفظ می شود

both انیمیشن از قوانین برای هر دو جلو و عقب پیروی می کند، ویژگی های انیمیشن را در هر دو جهت گسترش می دهد

مثال زیر اجازه می دهد که عنصر <div> مقادیر سبک را از آخرین کادر کلید هنگامی که انیمیشن به پایان می رسد را حفظ کند:

منحنی های سرعت متفاوت
.div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}
مشاهده مثال

مثال زیر اجازه می دهد که عنصر <div> مقادیر سبک را که توسط اولین عنصر کلید قبل از شروع انیمیشن (در طول دوره تاخیر انیمیشن) تنظیم شده است، دریافت کند:

ثابت
.div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
}
مشاهده مثال

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

اجرا و درآخر ثابت
.div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-delay: 2s;
    animation-fill-mode: both;
}
مشاهده مثال

ویژگی کوتاه انیمیشن

مثال زیر از شش ویژگی انیمیشن استفاده می کند:

ویژگی کوتاه انیمیشن
.div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
مشاهده مثال

همان اثر انیمیشن همانطور که در بالا ذکر شد می توان با استفاده از ویژگی animation  استفاده کزد

ویژگی animation
.div {
    animation: example 5s linear 2s infinite alternate;
}
مشاهده مثال

خصوصیات
شرح
keyframes@
کد انیمیشن را مشخص می کند
animation
یک ویژگی مختصر برای تنظیم تمام ویژگی های انیمیشن
animation-delay
یک تاخیر برای شروع یک انیمیشن مشخص می کند
animation-direction
مشخص می کند که آیا انیمیشن باید به جلو، عقب، یا در چرخه های متناوب پخش شود
animation-duration
تعیین طول مدت زمانی که یک انیمیشن باید برای تکمیل یک چرخه انجام دهد
animation-fill-mode
یک سبک برای عنصر را مشخص می کند هنگامی که انیمیشن پخش نمی شود (قبل از شروع آن، پس از پایان دادن به آن، یا هر دو)
animation-iteration-count
تعداد دفعاتی که یک انیمیشن باید بازی کند تعیین می کند
animation-name
نام انیمیشنkeyframes را مشخص می کند
animation-play-state
تعیین اینکه آیا انیمیشن در حال اجرا است یا مکث شده است
animation-timing-function
منحنی سرعت انیمیشن را مشخص می کند

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

نظرات

منوچهر عرض خسته نباشید سوالی از فلش پلیر داشتم کدی میخوام که با زدن دکمه یک خط یا یک مسیر تغییر رنگ دهد مثلا اگه مسیر ابی بود تغییر رنگ دهد وقرمز شود .. ممنون
علیرضا احمدی سلام آقای منوچهر ، ما فعالیتی در زمینه فلش پلیر نداریم.استفاده از فلش پلیر در وب منقضی شده و پیشنهاد نمیشه بهتون.

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط