قانون @keyframes
مثال (قانون @keyframes)
عنصر <div> بتدریج 200 پیکسل به سمت پایین حرکت می کند:
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
در انتهای این بیاموز، مثال های بیشتری را خواهید دید
پشتیبانی مرورگرها
مرورگرهای Internet Explorer 10, Firefox, Opera قانون keyframes@ را پشتیبانی می کنند.
مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.
توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.
تعریف و کاربرد
برای ایجاد انیمیشن در CSS3، ابتدا باید قانون keyframes@ را یاد بگیرید.
keyframes@ جایی است که در آن انیمیشن ایجاد می شود. داخل keyframes@ یک Style مشخص می کنیم و انیمیشن بتدریج از Style جاری به Style جدید تغییر می کند.
در طول اجرای انیمیشن می توانید چندین بار Style را تغییر دهید.
تغییرات را می توانید به صورت درصد یا با کلمه های کلیدی from و to بیان کنید.
0% ابتدای انیمیشن و 100% انتهای آن است.
برای پشتیبانی بهتر مرورگرها، همیشه 0% و 100% را مشخص نمایید.
توجه: پس از اینکه، انیمیشن را در قانون keyframes@ تعریف کردید، با استفاده از خاصیت animation آنرا به عنصر مورد نظرتان متصل کنید.
نحوه استفاده
| مقدار | توضیحات |
|---|---|
| animationname | الزامی است. نام انیمیشن را مشخص می کند. |
| keyframes-selector | الزامی است. مشخص می کند در چه زمانی از اجرای انیمیشن، Style اعمال شود. مقادیر مجاز: 0-100% |
| css-styles | الزامی است. می تواند شامل یک یا چند خصوصیت CSS باشد. |
مثال - خودتان امتحان کنید
مثال (قانون @keyframes)
مشخص کردن چندین keyframes-selector در یک انیمیشن:
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
مثال (قانون @keyframes)
تغییر چند Style به صورت همزمان:
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
مثال (قانون @keyframes)
چندین keyframes-selector و Style مختلف در یک انیمیشن:
{
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;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
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;}
}
بیاموزهای مرتبط
CSS3 Animation (بیاموز CSS3)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 12078
دیدگاه‌ها
سلام ببخشید ی سوال اگه بخوایم یک keyframe بعد از اینکه کاربر موس رو روی یک بکس آورد اجرا بشه و وقتی موس خارج شد به حالت اول برگرده باید چی کار کنیم ؟؟؟
سلام، به مثال زیر توجه کنید:
beyamooz.com/try_it_yourself/tryit.php?filename=trycss3_toggle_mouseenter