اولین انیمیشن خود را با CSS3 بسازید!

سلام و ادب! در این مقاله پرداخته میشود به ویژگی های ساده از انیمیشن CSS3. یک نمونه ابتدایی و بسیار ساده با هم کدنویسی میکنیم.

دانلود کدها

از این لینک میتوانید نمونه کدها را دانلود بفرمایید! بصورت ZIP است و بایستی ان را اکسترکت کنید. روی index.html کلیک کنید تا در بروزر نتیجه را ببینید! تصویر زیر را مشاهده خواهید کرد.

بررسی کدهای index.html

در فایل index.html سه خط Hello World! وجود دارد. کاملا ساده کدنویسی شده تا سریعتر قابل فهم باشد.

برای هر سه خط از یک انیمیشن استفاده میشود. خط اول یک span است. خط دوم یک تگ div است. هر دو کلاس box دارند. همانطور که میدانید تفاوت تگ های span و div در display انهاست. تگ دیو بصورت block و تگ اسپن بصورت inline نمایش داده میشود. در خط سوم هم یک دیو با کلاس box1 قرار داده شده است. برای دو خط اول از انیمیشن transition در CSS استفاده خواهیم کرد و برای خط سوم از انیمیشن keyframes استفاده میکنیم.

انیمیشن css3 : بررسی کدهای style.css

اینجا کدها به دو قسمت تقسیم میشوند. در استایل شیت میبینید که دو کامنت بزرگ قرار دارد. داخل یکی نوشته شده Transition Animation و داخل دیگری Keyframes Animation نوشته شده است. بیایید transition که ساده تر است را ابتدا بررسی کنیم:

.box{
  background-color: yellow;
}

.box:hover{
  transition: all ease-out .5s;
  background-color: green;
  padding-left: 600px;
}

وقتی موس روی المان های اول و دوم در بروزر قرار میگیرد شما یک پدینگ اضافی میبینید! همچنین رنگ پس زمینه تغییر میکند. بدین ترتیب انیمیشن رخ میدهد. اگر میخواستیم انیمیشن علاوه بر حالت هاور برای حالتی که بروزر ریلود میشود هم اتفاق بیفتد کافی بود کد مربوط به ترنزیشن از هاور کلاس box به خود کلاس box برود.

به قسمت دوم انیمیشن رسیدیم. با keyframes یک انیمیشن میسازیم تا برای المان سوم در بروز اعمال شود. همان المنتی که کلاس box1 داشت.

 
@keyframes my1stAnimation{
  0%{padding-left: 0;background-color: yellow}
  50%{padding-left: 600px;background-color: green}
  100%{padding-left: 0;background-color: yellow}
}

.box1{
  background-color: yellow;
  width: 100px;
  animation: my1stAnimation 5s ease-out 1s infinite;
}

نکته1: در کدهای بالا به ان قسمت که شبیه تعریف یک تابع در برنامه نویسی است نگاه کنید! کلمه my1stAnimation یک نام است و به جای ان هرنام دیگری میتواند قرار بگیرد! اگر نامش را تغییر دادید در روبروی animation هم باید همان نام را تغییر دهید! کاملا بدیهی است.

نکته2: ساخت انیمیشن به روش کیفریم پیچیده تر از ساخت انیمیشن با ترنزیشن است. اینجا میتوان درصد تعیین کرد و بیان کرد که در هر مرحله از انیمیشن چه اتفاقی باید بیفتد!

نکته3: شما میتوانید بسیاری از عدد ها را جابجا کنید و در بروزر نتیجه را ببینید! برای معرفی میگویم که در مقابل animation این ها نوشته شده اند: نام انیمیشن ، مدت زمان انیمیشن، حالت سرعت انیمیشن، تاخیر انیمیشن، تعداد دفعاتی که انیمیشن باید تکرار شود. بجای infinite میتوان از عدد یک تا دلخواه استفاده کرد.

نکته4: اگر بخواهیم میتوان یک خط بالا با خطوط زیر نوشت که با هم برابرند.

 
  animation-name: my1stAnimation;
  animation-duration: 5s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;