انیمیشن css3 با استفاده از transition
با css3 دو جور میشه انیمیشن ساخت. یکی transition و دیگری keyframe است. در مقاله قبل با keyframe این کار را انجام دادیم و حالا با transition در این مقاله اشنا میشویم! ابتدا کدهای زیر را به یک index.html کپی پیست کنید! سپس بروزر را باز کنید و موس را روی ناحیه سبز رنگ ببرید! کم کم متن hello world ظاهر میشود. این خروجی است!
<style media="screen">
.ferrari{background-color: green;}
.ferrari h1{
color: white;
opacity: 0%;
}
.ferrari:hover h1{
opacity: 100%;
transition: all .5s ease-in .5s;
}
</style>
<div class="ferrari">
<h1>Hello World!</h1>
</div>
انیمیشن css3 : تفسیر کدهای بالا
اگر بخواهیم کدهای بالا را تفسیر کنیم میگوییم بیشترش استایل است و فقط یک دیو با کلاس Ferrari وجود دارد. داخل این دیو یک تگ h1 وجود دارد که داخلش hello world نوشته شده است. استایل ها درباره همین دو المان بحث میکنند.
در میان استایل ها ابتدا به کلاس فراری یک بک گراند سبز رنگ دادیم تا در بروزر چیزی نمایش داده شود. سپس به h1 داخلش opacity را صفر دادیم تا محو باشد. میخواستیم کاری کنیم که انیمیشن را اینجا کار بگذاریم. با انیمیشن opacity را به 100 درصد برسانیم. اینگونه بود که در حالت hover نوشتیم transition و برای ان مقادیر نیم ثانیه را برای delay و duration قرار دادیم.
انیمیشن css3 : تست کردن با موس
از لحظه ای که نشانگر موس را روی دیو سبز میبریم نیم ثانیه طول میکشد تا متن سفید رنگ hello world نمایش داده شود. همچنین در حین نمایش نیم ثانیه طول میکشد تا کاملا ظاهر شود. حالت ظاهر شدن ان هم ease-in قرار دادیم. میتوانستیم به جایش بگذاریم linear یا ease-out تا حالت های دیگر را امتحان کنیم.
سوال: چرا transition: all ؟
ایا میدانید چرا در جلوی transition در کدهای بالا از all استفاده کردیم؟ میتوانستیم بجایش از color یا … استفاده کنیم اما اینطوری تمام پروپرتی ها مورد انیمیشن قرار میگیرند. مثلا اگر برای همین المنت بجای opacity از color یا بک گراند کالر استفاده میکردیم انگاه با all همگی تغییر میکردند.
میتوانید برای اطلاعات بیشتر به سایت w3school بروید و نمونه های بیشتری مشاهده فرمایید! کافیست در گوگل عبارت transition w3school css3 را سرچ فرمایید!