آموزش CSS – ساخت انیمیشن در CSS3

در جلسه قبل از آموزش CSS با ویژگی Transition در CSS3 آشنا شدید. در این بخش قصد داریم به نحوه ساخت انیمیشن در CSS3 یپردازیم.

قابلیت انیمیشن در CSS3 به شما اجازه ساخت انیمیشن های keyframe را می دهد.

ساخت انیمیشن در CSS3

در بخش قبلی نحوه ایجاد انمیشن های ساده مثل تغییر مقدار به دیگر توسط قابلیت transition در css3 را دیدیم.

به هر حال, transition کنترل کمی روی نحوه گسترش انیمیشن در طول زمان مشخص شده را می دهد.

ویژگی انیمیشن در CSS3 یک قدم جلوتر از transition, با قابلیت keyframe به شما اجازه مشخص کردن ویژگی های مختلف css طی زمان و درصد پیشرفت کار را می دهد.

ساخت انیمیشن در CSS3 یک فرایند دو مرحله ای بصورت زیر است:

اولین قدم ساخت یک انیمیشن css با تعریف یک at-rule به نام @keyframes و نام گذاری آن است
قدم دوم اشاره کردن به keyframe با ویژگی animation-name به همراه animation-duration و دیگر ویژگی های اختیاری انیمیشن که رفتار انیمیشن را کنترل می کنند.

به هر حال, ضروری نیست که رول های keyframes را قبل از اشاره یا اعمال کردن آن تعریف کنید.

مثال زیر به شما نحوه انیمیشن دهی باکس <div> بصورت افقی از یک موقعیت به موقعیت بعدی با قابلیت انیمیشن در CSS3 را نشان می دهد.

.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 2s;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 2s;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

.box {

width: 50px;

height: 50px;

background: red;

position: relative;

/* Chrome, Safari, Opera */

-webkit-animation-name: moveit;

-webkit-animation-duration: 2s;

/* Standard syntax */

animation-name: moveit;

animation-duration: 2s;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes moveit {

from {left: 0;}

to {left: 50%;}

}

/* Standard syntax */

@keyframes moveit {

from {left: 0;}

to {left: 50%;}

}

شما باید حداقل دو ویژگی animation-name و animation-duration (بزرگتر از ۰) را برای کار کردن انیمیشن, مشخص کنید.

به هر حال بقیه ویژگی های animation در css اختیاری است و مقادیر پیش فرض آنها تاثیری بر اجرای آن ندارد.

نکته: همه خصوصیات css قابلیت انیمیشنی را ندارند. بطور معمول, هر خصوصیت css ای که مقادیر عددی, طول, درصد یا رنگ را می پذیرد این قابلیت را دارند.

تعریف keyframes

Keyframes ها برای مشخص کردن مقادیر برای ویژگی ها در مراحل مختلف انیمیشن استفاده می شود و بصورت @keyframes مشخص می شود.

سلکتور keyframe برای رول استایل keyframe با درصد ٪ یا کلمه کلیدی from (همان %۰) یا to (همان ۱۰۰%) شروع می شود.

.box {
    width: 50px;
    height: 50px;
    margin: 100px;
    background: red;
    position: relative;
    left: 0;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: shakeit;
    -webkit-animation-duration: 2s;
    /* Standard syntax */
    animation-name: shakeit;
    animation-duration: 2s;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes shakeit {
    12.5% {left: -50px;}
    25% {left: 50px;}
    37.5% {left: -25px;}
    50% {left: 25px;}
    62.5% {left: -10px;}
    75% {left: 10px;}
}
 
/* Standard syntax */
@keyframes shakeit {
    12.5% {left: -50px;}
    25% {left: 50px;}
    37.5% {left: -25px;}
    50% {left: 25px;}
    62.5% {left: -10px;}
    75% {left: 10px;}
}

.box {

width: 50px;

height: 50px;

margin: 100px;

background: red;

position: relative;

left: 0;

/* Chrome, Safari, Opera */

-webkit-animation-name: shakeit;

-webkit-animation-duration: 2s;

/* Standard syntax */

animation-name: shakeit;

animation-duration: 2s;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes shakeit {

12.5% {left: -50px;}

25% {left: 50px;}

37.5% {left: -25px;}

50% {left: 25px;}

62.5% {left: -10px;}

75% {left: 10px;}

}

/* Standard syntax */

@keyframes shakeit {

12.5% {left: -50px;}

25% {left: 50px;}

37.5% {left: -25px;}

50% {left: 25px;}

62.5% {left: -10px;}

75% {left: 10px;}

}

مقدار درصد مشخص کننده درصد زمان انمیشن است که با animation-duration تعریف کردیم و ۰% تعیین کننده نقطه شروع اینیمیشن, ۱۰۰٪ پایان اینیمیشن, ۵۰٪ نقطه وسط ماجرا و به اینصورت …

به این معنا که ۵۰٪ keyframe در یک انیمیشن ۲ ثانیه ای یعنی در ثانیه ۱م.

دستور خلاصه نویسی animation

خصوصیات زیادی هستند که می توانید هنگام ساخت انیمیشن در CSS3 تعریف کنید. به هر حال این امکان هم وجود دارد که تمام خصوصیات انیمیشن ها را در یک ویژگی تنها بصورت کد کوتاه استفاده کنید.

ترتیب استفاده از تمام تنظیمات قابل استفاده ار ویژگی animation بصورت مرتب لیست شده است.

.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation: repeatit 2s linear 0s infinite alternate;
    /* Standard syntax */
    animation: repeatit 2s linear 0s infinite alternate;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes repeatit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standard syntax */
@keyframes repeatit {
    from {left: 0;}
    to {left: 50%;}
}

.box {

width: 50px;

height: 50px;

background: red;

position: relative;

/* Chrome, Safari, Opera */

-webkit-animation: repeatit 2s linear 0s infinite alternate;

/* Standard syntax */

animation: repeatit 2s linear 0s infinite alternate;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes repeatit {

from {left: 0;}

to {left: 50%;}

}

/* Standard syntax */

@keyframes repeatit {

from {left: 0;}

to {left: 50%;}

}

نکته: اگر هر یک از مقادیر مشخص نشده بود, مقدار پیش فرض آن در نظر گرفته می شود. به این معنی که اگر مقدار animation-duration مشخص نبود, هیچ انیمیشنی اعمال نمی شود چرا که مقدار پیش فرض ۰ است.

خصوصیات Animation در CSS3

جدول زیر یک خلاصه کوتاه از تمام ویژگی های Animation در CSS3 را ارایه می دهد:

خصوصیت	توضیحات
`animation`	یک خصوصیت برای تعریف تمام ویژگی های انیمیشن css بصورت یکجا
`animation-name`	برای اختصاص دادن یک و یا چند انیمشین تعریف شده توسط `@keyframes`به عنصر انتخاب شده
`animation-duration`	مشخص می کند که چند ثانیه یا میلی ثانیه طول می کشد تا یک حلقه اجرای انیمیشن تکمیل شود.
`animation-timing-function`	مشحص می کند که یک انیمیشن در طول یک حلقه به چه صورت طی شود
`animation-delay`	مشخص کننده وقفه زمانی قبل از اجرای انیمیشن
`animation-iteration-count`	مشخص می کند که یک انیمیشن قبل از توقف چند بار یک حلقه را تکرار کند
`animation-direction`	مشخص می کند که حلقه تکرار انیمیشن به چه صورت باشد : alternate یا reverse که حتما تست کنید
`animation-fill-mode`	مشخص می کند در زمان مکث قبل از اجرای انیمیشن و همینطور زمانی که انیمیشن به پایان می رسد چه مقادیری برای عنصر تنظیم شوند.
`animation-play-state`	مشخص می کند که انیمیشن در حال اجرا باشد یا توقف کند : running یا paused
`@keyframes`	برای تعریف رفتار یک چرخه انیمیشن استفاده می شود و نام تعیین شده در ویژگی `animation-name` قرار می دهیم