انیمیشن ها در CSS3

5 / 10
از 2 کاربر

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

انیمیشن های CSS3 چه چیزهایی هستند؟

یک انیمیشن اجازه می دهد تا یک عنصر به تدریج از یک سبک به سبک دیگری تغییر کند. شما می توانید ویژگی های CSS را هر زمان که بخواهید تغییر دهید. به منظور استفاده از انیمیشن CSS3 ، ابتدا باید چند فریم پایه (keyframe) برای انیمیشن خود مشخص کنید. keyframe ها تعیین می کنند که عناصر در زمان مشخص باید چه سبکی داشته باشند.

قانون keyframes@

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

در مثال زیر نمونه انیمیشن به عنصر <div> متصل شده است. انیمیشن به مدت 4 ثانیه طول می کشد، و به تدریج رنگ پس زمینه عنصر <div> از قرمز به زرد تغییر می کند:

/* 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) مشخص نشده باشد، انیمیشن هیچ تاثیری نخواهد داشت زیرا مقدار پیش فرض آن صفر است. در مثال بالا زمان تغییر سبک را با استفاده از عبارات "from" و "to" مشخص کرده ایم.

همچنین می توانید از درصد استفاده کنید. با استفاده از درصد شما می توانید هر چند تغییر سبک که می خواهید اضافه کنید. در مثال زیر رنگ پس زمینه <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> نیز زمانی که 0%، 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;
}

تنظیم تعداد دفعات اجرای انیمیشن

ویژگی animation-iteration-count (دفعات تکرار انیمیشن) تعیین کننده تعداد دفعات اجرای یک انیمیشن است. برای مثال در نمونه زیر انیمیشن قبل از توقف 3 بار اجرا می شود.

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

با استفاده از عبارت "infinite" در هنگام طراحی سایت ، برای ویژگی animation-iteration-count می توانید انیمیشن را به طور بی نهایت اجرا کنید.

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

ویژگی animation-direction (جهت انیمیشن) این امکان را فراهم می کند که انیمیشن در جهت معکوس و یا در یک چرخه متناوب اجرا شود. به منظور جابه جایی انیمیشن در جهت معکوس از عبارت "reverse" و برای اجرای انیمیشن به صورت متناوب از "alternate" nv طراحی سایت استفاده کنید.

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

ارسال نظر و نظرات ثبت شده