گروه مقاله : CSS3
تاريخ انتشار : 1394/03/06 - 10:12
كد :601

متحرک سازی یا انیمیشن در CSS3

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;
}
نظرات كاربران :