متحرک سازی عناصر در CSS

آنچه در این جلسه میخوانید :

1 متحرک سازی عناصر در CSS
2 پشتیبانی مرورگرها از متحرک سازی عناصر در CSS
3 مثال از متحرک سازی عناصر در CSS

برخی از ویژگی های زبان CSS قابل متحرک سازی یا Animatable می باشند، این یعنی ما میتونیم از انیمیشن ها ( Animations ) یا ترنزیشین ها ( Transitions ) بروی این ویژگی ها استفاده نماییم.

بفرض مثال ما میتونیم با استفاده از ویژگی animation مشخص نماییم که در یک مدت زمان مشخص رنگ زمینه ی یک عنصر به تدریج ( براساس زمان ) تغییر کند ، و یا مثلا با استفاده از ویژگی transition میتوانیم مشخص کنیم که وقتی ماوس بروی یک عنصر میرود آن عنصر با افکت انتقال به آرامی گوشه هایش گرد شود و…

Free-Learn

پشتیبانی مرورگرها از متحرک سازی عناصر در CSS

در جدول زیر یک عدد از نسخه یا ورژن مرورگرهای اینترنتی وجود داره که داره میگه این مرورگرها از اون نسخه به بعد از انیمیشن ها ( Animations ) و ترنزیشین ها ( Transitions ) پشتیبانی میکند.

Chrome	Firefox	Opera	Safari	IE
۴۳٫۰	۱۶٫۰	۳۰٫۰	۹٫۰	۱۰٫۰

حال باید یه فکری برای نسخه های قبل تر و قدیمی تر این مرورگرها برای پشتیبانی از این ویژگی ها هم کرد، در نتیجه ما باید از یسری دستورات پیشوندی برای پشتیبانی کامل مرورگرها از این ویژگی ها استفاده نماییم.

-webkit- | برای مرورگر گوگل کروم
-webkit- | برای مرورگر سافاری
-webkit- | برای مرورگر اوپرا
-o- | برای مرورگر اوپرا نسخه های خیلی قدیمی تر
-moz- | برای مرورگر موزیلا فایرفاکس

Chrome	Firefox	Opera	Safari	IE
۴٫۰ به بالا با -webkit-	۵٫۰ به بالا با -moz-	۱۵٫۰ به بالا با -webkit- ۱۲٫۰ به بالا با -o-	۴٫۰ به بالا با -webkit-	–

Free-Learn

مثال از متحرک سازی عناصر در CSS

در مثال زیر من از ۲ ویژگی که خودشون قابلیت متحرک سازی دارند استفاده کردم، یکی background-color و دیگری width ، پس خوده ویژگی باید حتما قابلیت متحرک سازی داشته باشد تا بتونیم ازش در انیمیشن ها استفاده نماییم.

<style>

#free-learn{
 width: 100px;
 height: 100px;
 background: red;
 -webkit-animation: test 2s infinite alternate;
 animation: test 2s infinite alternate;
}

@-webkit-keyframes test{
 from {
 background-color: yellow;
 width:100px;
 }
 to {
 background-color: red;
 width:400px;
 }
}

@keyframes test{
 from {
 background-color: yellow;
 width:100px;
 }
 to {
 background-color: red;
 width:400px;
 }
}

</style>

<style>

#free-learn{

width: 100px;

height: 100px;

background: red;

-webkit-animation: test 2s infinite alternate;

animation: test 2s infinite alternate;

}

@-webkit-keyframes test{

from {

background-color: yellow;

width:100px;

}

to {

background-color: red;

width:400px;

}

@keyframes test{