انیمیشن های CSS (CSS Animations)

«انیمیشن های CSS» به شما اجازه می دهد بدون جاوااسکریپت، استایل عناصر را به صورت تدریجی تغییر دهید. برای این کار، کی فریم ها (@keyframes) را تعریف کرده و سپس آن را به عنصر متصل می کنید.

مقدمه ای بر انیمیشن های CSS

یک انیمیشن می تواند یک یا چند ویژگی CSS را در زمان های مختلف تغییر دهد. برای اجرا، نام انیمیشن و مدت زمان را با animation-name و animation-duration مشخص کنید.

قانون @keyframes و اتصال به عنصر

درون @keyframes می توانید از from/to یا درصدها استفاده کنید و سپس آن را به عنصر ببندید.

نمونه ساده انیمیشن های CSS

/* The animation code */
@keyframes myAnimation { 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: myAnimation; animation-duration: 4s; }

می توانید از درصدها برای چندین تغییر پیاپی استفاده کنید:

@keyframes myAnimation { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }

div { width: 100px; height: 100px; background-color: red; animation-name: myAnimation; animation-duration: 4s; }

همچنین می توان ویژگی های دیگر مانند موقعیت را نیز تغییر داد:

@keyframes myAnimation { 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;} }

div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: myAnimation; animation-duration: 4s; }

تأخیر شروع با animation-delay

برای تعیین تأخیر شروع، از animation-delay با ثانیه یا میلی ثانیه استفاده کنید. مقدار منفی یعنی انیمیشن انگار از قبل آغاز شده است.

div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: myAnimation; animation-duration: 4s; animation-delay: 2s; }

div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: myAnimation; animation-duration: 4s; animation-delay: -2s; }

تکرار با animation-iteration-count

با animation-iteration-count تعداد تکرار را تعیین کنید؛ مقدار infinite یعنی بی نهایت.

div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: myAnimation; animation-duration: 4s; animation-iteration-count: 3; }

div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: myAnimation; 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: myAnimation; animation-duration: 4s; animation-direction: reverse; }

div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: myAnimation; animation-duration: 4s; animation-iteration-count: 2; animation-direction: alternate; }

div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: myAnimation; animation-duration: 4s; animation-iteration-count: 2; animation-direction: alternate-reverse; }

منحنی سرعت با animation-timing-function

برای کنترل سرعت از ease، linear، ease-in، ease-out، ease-in-out یا cubic-bezier() استفاده کنید.

#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;}

حالت پرشدن با animation-fill-mode

برای اعمال استایل قبل از شروع یا بعد از پایان انیمیشن، از none، forwards، backwards یا both استفاده کنید.

div { width: 100px; height: 100px; background: red; position: relative; animation-name: myAnimation; animation-duration: 3s; animation-fill-mode: forwards; }

div { width: 100px; height: 100px; background: red; position: relative; animation-name: myAnimation; animation-duration: 3s; animation-delay: 2s; animation-fill-mode: backwards; }

div { width: 100px; height: 100px; background: red; position: relative; animation-name: myAnimation; animation-duration: 3s; animation-delay: 2s; animation-fill-mode: both; }

میان بر animation در انیمیشن های CSS

می توانید همه مقادیر را به ترتیب در ویژگی animation بنویسید.

div { animation-name: myAnimation; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; }

div { animation: myAnimation 5s linear 2s infinite alternate; }

نکته: برای شروع ساده، از نمونه های بالا کپی کرده و سپس نام، زمان و منحنی را مطابق نیاز تنظیم کنید.

مطالب مرتبط: ترنزیشن های CSS، CSS Tooltip و راهنمای انیمیشن های CSS.

بیشتر بدانید: استاندارد CSS Animations Level 1 و مرجع انیمیشن های CSS. همچنین برای جستجو از عبارت انیمیشن های CSS استفاده کنید.