- نویسنده : مدیر
- بازدید : 249 مشاهده
- دسته بندی : دانستنی های وبسایت و سئو ,
(کل 1 توسط 0 نفر)
خوب برای نمایش دادن صحیح @keyframes در همه ی مرورگر ها به ترتیب زیر خواهیم گفت
قبل از هرچیز دوستانی که نمیدونن @keyframes چیه ما با این دستور میتونیم انیمیشن ها رو بصورت css بنویسیم
@keyframes در مرورگر های :
- Google Chorme ورژن 43.0 به بالاتر
- Internet Explorer ورژن 10 به بالا
- FireFox ورژن 16 به بالا
- Safari ورژن 9 به بالا
- و Opera ورژن 30 به بالا
بصورت صحیح نمایش داده خواهد شد ولی اما در ورژن پایینتر این مرورگر ها به ترتیب
- Google Chorme ورژن 4.0 به بالا با استفاده از -webkit-
- Internet Explorer در ورژن های پایین تر از 10 انیمیشن پشتیبانی نخواهد کرد
- FireFox ورژن 5.0 به بالا با استفاده از -moz-
- Safari ورژن 4.0 به بالا با استفاده از -webkit-
- Opera ورژن 15.0 به بالا با استفاده از -webkit- و ورژن 12.0 به بالا با استفاده از -o-
برای مثال یک نمونه براتون نمایش خواهیم داد
@keyframes mymove {
from {left: 0px;}
to {left: 50px;}
}
کد بالا استاندارد نوشتن انیمیشن هست اما این کد مثلا در مرورگر فایرفاکس ورژن 8.0 کار نمیکنه برای استفاده از اون باید کد رو بصورت زیر بنویسیم
@-moz-keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
منبع: اسکینک