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

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

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

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

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

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

را به صورت افقی از یک موقعیت به موقعیت دیگر منتقل کنید.

مثال

.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 خاص [email protected] در 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

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

توضیحات ویژگی
یک ویژگی کوتاه شده برای تنظیم تمام ویژگی های انیمیشن در یک اعلان واحد است.

animation

نام [email protected] انیمیشن های تعریف شده ای را مشخص می کند که باید به عنصر انتخاب شده اعمال شود

animation-name

مدت زمانی (ثانیه یا میلی ثانیه) تکمیل یک چرخه انیمیشن را مشخص می کند.

animation-duration

نحوه حرکت انیمیشن را روی گذشت زمان هر چرخه مشخص می کند، مانند توابع easing.

animation-timing-function

زمان شروع انیمیشن را مشخص می کند.

animation-delay

تعداد دفعاتی را مشخص می کند که چرخه انیمیشن باید قبل از توقف پخش شود.

animation-iteration-count

مشخص می کند که آیا انیمیشن باید در چرخه های متناوب پخش شود یا خیر.

animation-direction

تعیین می کند که چگونه یک انیمیشن باید سبک ها را به قبل و بعد از اجرای هدف خود اعمال کند.

animation-fill-mode

تعیین می کند که انیمیشن در حال اجرا یا توقف است.

animation-play-state

مقادیری برای ویژگی های انیمیشن در نقاط مختلف در طول انیمیشن مشخص می کند.

@keyframes