آموزش انیمیشن ها در CSS3 به زبان ساده

ویژگی انیمیشن های CSS3 به شما امکان ایجاد انیمیشن های keyframe (فریم کلیدی) را می دهد.

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

در فصل قبل با شیوه ساخت انیمیشن های ساده مانند حرکت یک ویژگی از یک مقدار به مقدار دیگر توسط ویژگی transitions در CSS3 آشنا شدید. با این حال، انتقال ها در CSS3 کنترل کمی روی حرکت انیمیشن با گذشت زمان ارائه می دهند.

انیمیشن های CSS3 با انیمیشن های مبتنی بر keyframe یک مرحله جلوتر می روند. آنها اجازه می دهند تا تغییرات ویژگی های CSS را روی گذر زمان به صورت مجموعه ای از فریم های کلیدی، مانند انیمیشن های فلش مشخص کنید. ایجاد انیمیشن های CSS یک فرایند دو مرحله ای است، همانطور که در مثال زیر نشان داده شده است:

• مرحله اول برای ساخت یک انیمیشن CSS، تعریف فریم های کلیدی تکی و نامگذاری انیمیشن با اعلان یک keyframes است.
• مرحله دوم با استفاده از ویژگی animation-name به فریم های کلیدی اشاره می کنیم و همچنین ویژگی animation-duration  و سایر ویژگی های انیمیشن اختیاری را برای کنترل رفتار انیمیشن اضافه می کنیم.

اما لازم نیست قبل از اشاره یا اعمال آن، قوانین keyframes را تعریف کنید. مثال زیر به شما نشان می دهد که چگونه با استفاده از ویژگی انیمیشن CSS3، جعبه عنصر <div> را به صورت افقی از یک موقعیت به موقعیت دیگر منتقل کنید.

مثال

.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* کروم، سافاری، اپرا */
-webkit-animation-name: moveit;
-webkit-animation-duration: 2s;
/* ساختار استاندارد */
animation-name: moveit;
animation-duration: 2s;
}
/* کروم، سافاری، اپرا */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
/* ساختار استاندارد */
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}

برای ایجاد انیمیشن باید حداقل دو ویژگی animation-name و animation-duration (مقدار بزرگتر از ۰) را مشخص کنید. با این حال، همه ویژگی های دیگر انیمیشن اختیاری هستند، زیرا مقادیر پیش فرض آنها از رویداد انیمیشن جلوگیری نمی کند.

توجه: همه ویژگی های CSS قابل انیمیشن سازی نیستند. به طور کلی، هر ویژگی CSS که مقادیر عددی، طول، درصد یا رنگ را می پذیرند، قابلت انیمیشن سازی دارند.

تعریف Keyframes

از Keyframes برای تعیین مقادیر ویژگی های انیمیشن در مراحل مختلف انیمیشن سازی استفاده می شود. فریم های کلیدی با استفاده از قانون at خاص keyframes@ در CSS مشخص می شوند. انتخابگر keyframe برای قانون سبک فریم کلیدی با درصد (٪) یا کلمات کلیدیfrom  (همان ٪۰) یا to (همان %۱۰۰) شروع می شود. از انتخابگر برای تعیین جایی که یک فریم کلیدی در مدت زمان انیمیشن ساخته می شود، استفاده می شود.

درصدها، درصدی از مدت زمان انیمیشن را نشان می دهند، ٪۰ نقطه شروع انیمیشن، ٪۱۰۰ نقطه پایان را نشان می دهد، ٪۵۰ نمایانگر نقطه میانی و … است. این بدان معناست که ٪ ۵۰ یک keyframe در یک انیمیشن ۲ ثانیه ای، در انیمیشن ۱ ثانیه طول خواهد کشید.

مثال

.box {
width: 50px;
height: 50px;
margin: 100px;
background: red;
position: relative;
left: 0;
/* کروم، سافاری، اپرا */
-webkit-animation-name: shakeit;
-webkit-animation-duration: 2s;
/* ساختار استاندارد */
animation-name: shakeit;
animation-duration: 2s;
}
/* کروم، سافاری، اپرا */
@-webkit-keyframes shakeit {
۱۲٫۵% {left: -50px;}
۲۵% {left: 50px;}
۳۷٫۵% {left: -25px;}
۵۰% {left: 25px;}
۶۲٫۵% {left: -10px;}
۷۵% {left: 10px;}
}
/* ساختار استاندارد */
@keyframes shakeit {
۱۲٫۵% {left: -50px;}
۲۵% {left: 50px;}
۳۷٫۵% {left: -25px;}
۵۰% {left: 25px;}
۶۲٫۵% {left: -10px;}
۷۵% {left: 10px;}
}

ویژگی کوتاه شده Animation

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

ویژگی animation یک ویژگی کوتاه شده برای تنظیم تمام ویژگی های انیمیشن مجزا به صورت یکجا به ترتیب ذکر شده است.

مثال

.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* کروم، سافاری، اپرا */
-webkit-animation: repeatit 2s linear 0s infinite alternate;
/* ساختار استاندارد */
animation: repeatit 2s linear 0s infinite alternate;
}
/* کروم، سافاری، اپرا */
@-webkit-keyframes repeatit {
from {left: 0;}
to {left: 50%;}
}
/* ساختار استاندارد */
@keyframes repeatit {
from {left: 0;}
to {left: 50%;}
}

توجه: اگر هر مقداری حذف یا مشخص نشده باشد، به جای آن از مقدار پیش فرض ویژگی استفاده می شود. به این معنی که اگر مقدار ویژگی animation-duration تنظیم شده است، هیچ تغییری رخ نمی دهد، زیرا مقدار پیش فرض آن ۰ است.

ویژگی های انیمیشن در CSS3

در جدول زیر خلاصه ای از همه ویژگی های مرتبط با انیمیشن ارائه شده است.