قانون @keyframes CSS
- صفحه قبلی justify-self
- صفحه بعدی @layer
تعریف و استفاده
با استفاده از قاعده @keyframes، شما می‌توانید انیمیشن ایجاد کنید.
اصل ایجاد انیمیشن این است که یک مجموعه CSS به تدریج به مجموعه دیگری تغییر می‌کند.
در طول فرآیند انیمیشن، شما می‌توانید این مجموعه CSS را چندین بار تغییر دهید.
با استفاده از درصد‌ها زمان تغییرات را مشخص کنید یا از کلمات کلیدی "from" و "to" استفاده کنید که معادل 0% و 100% هستند.
0% زمان شروع انیمیشن و 100% زمان پایان انیمیشن است.
توضیح:برای بهینه‌سازی پشتیبانی مرورگرها، همیشه باید انتخابگرهای 0% و 100% را تعریف کنید.
توضیح:برای کنترل ظاهر انیمیشن از ویژگی‌های انیمیشن استفاده کنید و آن را با انتخابگر پیوند دهید.
توجه:!important قوانین در فریم‌های کلیدی نادیده گرفته می‌شوند (لطفاً به مثال آخر این صفحه مراجعه کنید).
لطفاً به: مراجعه کنید
آموزش CSS3:آنیماشن CSS3
مثال
مثال 1
برای حرکت یکنواخت div به سمت پایین:}}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
مثال 2
افزودن چند انتخابگر keyframe در یک انیمیشن:
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
مثال 3
تغییر چند استایل CSS در یک انیمیشن:
@keyframes mymove {
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
مثال 4
انتخابگرهای keyframe چندگانه با چند استایل CSS:
@keyframes mymove {
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
مثال 5
توجه:قوانین !important در فریم‌های کلیدی نادیده گرفته می‌شوند:
@keyframes myexample {
from {top: 0px;}
50% {top: 100px !important;} /* نادیده گرفته می‌شود */
to {top: 200px;}
}
زبان CSS
@keyframes animationname {keyframes-selector {css-styles;}}
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| animationname | ضروری است. نام انیمیشن را تعریف می‌کند. |
| keyframes-selector |
ضروری است. درصد زمان اجرای انیمیشن. مقدارهای قانونی:
|
| css-styles | ضروری است. یک یا چند عنصر CSS استایل قانونی. |
مرورگر پشتیبانی می‌کند
| کروم | IE / Edge | افراد | سافاری | اوپرا |
|---|---|---|---|---|
| 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
- صفحه قبلی justify-self
- صفحه بعدی @layer
