انیمیشن ها (Animations)
«انیمیشن (Animation)» یعنی تغییرِ پیوسته استایل در زمان. با @keyframes مراحل را می سازیم. سپس با animation روی عنصر اجرا می کنیم. مثل انیمیشن لوگو در صفحه بازی.
شروع سریع: animation-name و animation-duration
یک نام بده. سپس مدت را تعیین کن. بدون مدت، انیمیشن اجرا نمی شود.
@keyframes myAnimation {\n from { background-color: red; }\n to { background-color: yellow; }\n}\n\ndiv {\n width: 100px;\n height: 100px;\n background-color: red;\n animation-name: myAnimation;\n animation-duration: 4s;\n}\nKeyframes درصدی؛ چند تغییر در مسیر
با درصدها، رنگ در چند لحظه عوض می شود. کنترل دقیق تر می گیری.
@keyframes myAnimation {\n 0% { background-color: red; }\n 25% { background-color: yellow; }\n 50% { background-color: blue; }\n 100% { background-color: green; }\n}\n\ndiv {\n width: 100px;\n height: 100px;\n background-color: red;\n animation-name: myAnimation;\n animation-duration: 4s;\n}\nتغییر رنگ و موقعیت همزمان
می توان موقعیت را هم انیمیت کرد. مثل حرکت یک مربع در صفحه.
@keyframes myAnimation {\n 0% { background-color: red; left: 0px; top: 0px; }\n 25% { background-color: yellow; left: 200px; top: 0px; }\n 50% { background-color: blue; left: 200px; top: 200px; }\n 75% { background-color: green; left: 0px; top: 200px; }\n 100% { background-color: red; left: 0px; top: 0px; }\n}\n\ndiv {\n width: 100px;\n height: 100px;\n position: relative;\n background-color: red;\n animation-name: myAnimation;\n animation-duration: 4s;\n}\nتاخیر شروع؛ animation-delay
با delay انیمیشن دیرتر آغاز می شود. حتی مقدار منفی هم می پذیرد.
div {\n width: 100px;\n height: 100px;\n position: relative;\n background-color: red;\n animation-name: myAnimation;\n animation-duration: 4s;\n animation-delay: 2s;\n}\nتکرارها؛ animation-iteration-count
عدد مشخص کن یا از infinite استفاده کن. انیمیشن پیوسته می شود.
div {\n width: 100px;\n height: 100px;\n background-color: red;\n animation-name: myAnimation;\n animation-duration: 4s;\n animation-iteration-count: 3;\n}\nجهت پخش؛ animation-direction
جهت را normal، reverse، alternate یا alternate-reverse بگذار.
div {\n width: 100px;\n height: 100px;\n background-color: red;\n animation-name: myAnimation;\n animation-duration: 4s;\n animation-direction: reverse;\n}\nمنحنی سرعت؛ animation-timing-function
linear یکنواخت است. ease آرام شروع می کند. بقیه ترکیبی اند.
#div1 { animation-timing-function: linear; }\n#div2 { animation-timing-function: ease; }\n#div3 { animation-timing-function: ease-in; }\n#div4 { animation-timing-function: ease-out; }\n#div5 { animation-timing-function: ease-in-out; }\nحالت پایانی؛ animation-fill-mode
با forwards حالت نهایی می ماند. با backwards از ابتدا اعمال می شود.
div {\n width: 100px;\n height: 100px;\n background: red;\n position: relative;\n animation-name: myAnimation;\n animation-duration: 3s;\n animation-fill-mode: forwards;\n}\nحالت خلاصه؛ animation shorthand
همه تنظیمات در یک خط می آیند. ترتیب را رعایت کن.
div {\n animation: myAnimation 5s linear 2s infinite alternate;\n}\nمراحل تمرین سریع
- @keyframes را با دو رنگ بساز.
- animation را روی یک div اعمال کن.
- duration، timing و direction را تغییر بده.
برای تغییر نرم ساده، انتقال ها را ببین. برای حرکات فضایی، تبدیل های دو بعدی و تبدیل های سه بعدی کمک می کنند.
جمع بندی سریع
- @keyframes مراحل انیمیشن را تعریف می کند.
- animation نام و مدت را تعیین می کند.
- delay شروع را عقب می برد.
- iteration-count تعداد تکرار را می سازد.
- fill-mode حالت قبل و بعد را کنترل می کند.