چگونه انیمیشن را در همه مرورگر ها اجرا کنیم ؟

چگونه انیمیشن را در همه مرورگر ها اجرا کنیم ؟

خوب برای نمایش دادن صحیح @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;}

}

منبع: اسکینک

افزودن به علاقه‌مندی‌ها حذف از علاقه‌مندی

14 فروردین 1396
0 دیدگاه
311 بازدید

اشتراک گذاری

چطور انیمیشن را در همه مرورگر ها اجرا کنیم ؟آموزش طراحی وب آموزش Css آموزش سی اس اس آموزش کار با انیمیشن در css3 آموزش Css3 css3 آموزش های حرفه ای طراحی قالب آموزش کدنویسی آموزش کدنویسی قالب چگونه انیمیشن را در همه مرورگر ها اجرا کنیم ؟