CSS3 این امکان را به شما می دهد که عناصر را متحرک نمایید. (بدون استفاده از Flash و JavaScript )
پشتیبانی مرورگرها
|
Property |
|
|
|
|
|
|
@keyframes |
10.0 |
4.0 -webkit- |
16.0
5.0 -moz- |
4.0 -webkit- |
15.0 -webkit-
12.1
12.0 -o- |
|
animation |
10.0 |
4.0 -webkit- |
16.0
5.0 -moz- |
4.0 -webkit- |
15.0 -webkit-
12.1
12.0 -o- |
مرورگرهای Internet Explorer 10, Firefox, Opera قانون keyframes@ و خصوصیت animation را پشتیبانی می کنند.
مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.
نکته: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.
انیمیشن در CSS3 چیست؟
انیمیشن، افکتی است که اجازه می دهد، یک عنصر بتدریج از یک Style به Styleی دیگر تغییر کند.
شما می توانید Styleها و زمان های دلخواهتان را مشخص نمایید.
برای بکار بردن افکت Animation، ابتدا باید keyframeهایی را برای Animation تعریف کنید.
تغییرات را می توانید به صورت درصد یا با کلمه های کلیدی from و to بیان کنید.
0% ابتدای انیمیشن و 100% انتهای آن است.
برای پشتیبانی بهتر مرورگرها، همیشه 0% و 100% را مشخص نمایید.
قانون keyframes@ در CSS3
برای ایجاد انیمیشن در CSS3، ابتدا باید قانون keyframes@ را یاد بگیرید.زمانیکه یک Styleرا داخل keyframesمشخص می کنیم،انیمیشن بتدریج از Style جاری به Style جدید تغییر می کند.
پس از اینکه، انیمیشن را در قانون keyframes@ تعریف کردیم، با استفاده از خاصیت animation آنرا به عنصر مورد نظرمان متصل می کنیم.
در مثال زیر یک انیمیشن بنام "example" با مدت زمان 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;
}
نکته : در صورتی که هیچ زمانی داده نشود، انیمیشن اجرا نخواهد شد، چون زمان پیشفرض 0 ثانیه است.
در مثال زیر زمانی که انیمیشن به 25% اجرای خود رسید، رنگ پس زمینه به زرد تغییر می کند و در 50% آبی و در پایان سبر خواهد شد:
/* 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> تغییر می کند:
/* 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;
}
خصوصیت های انیمیشن
|
خاصیت |
توضیحات |
|
@keyframes |
متحرک سازی را مشخص می کند |
|
animation |
را بصورت مختصر مشخص می کند animation-play-state تمام خصوصیت های متحرک سازی بجز خصوصیت |
|
animation-delay |
زمان شروع انیمیشن را مشخص می کند. مقدار پیشفرض 0 است |
|
animation-direction |
اگر تعداد تکرار انیمیشن بیش از 1 بار باشد، این خصوصیت سیکل تناوب انیمیشن را مشخص می کند |
|
animation-duration |
زمان اجرای انیمیشن به ثانیه یا میلی ثانیه، مقدار پیشفرض 0 است |
|
animation-iteration-count |
تعداد دفعاتی که انیمیشن اجرا می شود را مشخص می کند. مقدار پیشفرض 1 است |
|
animation-name |
ذکر شده است را مشخص می کند @keyframes نام انیمیشن که در قانون |
|
animation-play-state |
است "running" توقف یا اجرای انیمیشن را مشخص می کند. مقدار پیشفرض |
|
animation-timing-function |
است "ease" نحوه پردازش انیمیشن در طول یک سیکل را توضیح می دهد. مقدار پیشفرض
|
در مثال زیر تمام خصوصیت های انیمیشن استفاده شده است:
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
اجرای انیمیشن مثال قبل، که تمام تنظیمات قبلی در خصوصیت animation تنظیم شده است:
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}