انیمیشن با CSS این قابلیت را به ما می دهد تا بدون جاوا اسکریپت یک انیمیشن با قابلیت ست کردن keyframes درست کنیم .
keyframe انیمیشن ها در حال حاضر در مرورگرهای webkit ( نظیر کروم) ، فایرفاکس ، و IE10 ساپورت می شوند و در سایر مرورگر های قدیمی انیمیشن شما نمایش داده نمی شود .
۸ خصوصیت برای تعریف انیمیشن در CSS وجود دارد
۱- animation-delay : تعریف می کند چه موقع انیمیشن استارت شود.
۲- animation-direction : تعیین می کند که انیمیشن به صورت طبیعی یا معکوس اجرا شود .
۳- animation-duration : طول مدت کامل یک سیکل کامل انیمیشن را تعریف می کند.
۴- animation-interation-count : تعداد دفعاتی که باید سیکل انیمیشن پیش از توقف تکرار شود .
۵- animation-name : یک نام برای انیمیشن با قاعده keyframes تعیین می کند.
۶- animation-play-state : تعیین می کند چه موقع انیمیشن استاپ یا استارت شود .
۷- animation-timing-function : تعیین می کند چگونه یک انیمیشن پس از سیکلش رفتار کند.
۸- animation-fill-mode : تعیین می کند چگونه یک css انیمیشن باید استایل خود را پیش و پس از اجرا بپذیرد
در زیر یک نمونه کد را با هم می بینیم
div { animation-name: move; animation-duration: 1s; animation-timing-function: ease-in-out; animation-delay: 0.5s; animation-iteration-count: 2; animation-direction: alternate; -moz-animation-name: move; -moz-animation-duration: 1s; -moz-animation-timing-function: ease-in-out; -moz-animation-delay: 0.5s; -moz-animation-iteration-count: 2; -moz-animation-direction: alternate; -webkit-animation-name: move; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-delay: 0.5s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternate; } /* codeplan.ir. */ @keyframes move { from { transform: translateX(0); } to { transform: translateX(100px); } } @-moz-keyframes move { from { -moz-transform: translateX(0); } to { -moz-transform: translateX(100px); } } @-webkit-keyframes move { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(100px); } }
البته به اختصار به صورت زیر نیز می توانیم بیاوریم :
div { animation: move 1s ease-in-out 0.5s 2 alternate; -moz-animation: move 1s ease-in-out 0.5s 2 alternate; -webkit-animation: move 1s ease-in-out 0.5s 2 alternate; }
Keyframe :
هر کی فریم تعیین می کند که المان های انیمیشن چگونه برای رسیدن به نقطه هدف در یک سکانس رندر شوند . در صورتیکه مقدار زمان کی فریم ۰% باشد بیانگر زمان آغاز و اگر ۱۰۰% باشد بیانگر زمان خاتمه هست .
به مثال زیر توجه داشته باشید.
@keyframes move { ۰% { transform: translateX(0); } ۱۰۰% { transform: translateX(100px); } } /* codeplan.ir */ @keyframes move { ۰% { transform: translateX(0); } ۵۰% { transform: translateX(20px); } ۱۰۰% { transform: translateX(100px); } }
دیدگاه بگذارید
Be the First to Comment!