در CSS قالب های خوبی برای خلق انیمیشن های جذاب در صفحات وب وجود دارد. توسط این پراپرتی و توسط رول keyframe می توانیم انیمیشن های جذابی برای صفحات وب ایجاد کنیم. ما محدود و عامیانه توضیح دادیم، خواستی بیشتر بدونی این لینک رو ببین.
/*
پراپرتی مخصوص نوشتن دستورات انیمیشن
در واقع داخل این قسمت مشخص میکنیم که انیمیشن چطوری باشه
*/
@keyframes animations_name{}
/* نام انیمیشن که جلوی کی فریم بالایی نوشته میشود. */
animation-name: ;
/* مدت زمان انجام انیمیشن چقدر طول بکشه */
animation-duration: ;
/* دیلی: تاخیر اولیه برای شروع انیمیشن */
animation-delay: ;
/* تعداد تکرار انیمیشن */
animation-iteration-count: ;
/* جهت اجرای انیمیشن هست */
animation-direction: ;
/* حالت تایمی */
animation-timing-function: ;
animation-fill-mode: ;
animationبراش شروع ما یک رول keyframe داریم که کد های مربوط به انیمیشن کردن رو داخلش قرار میدیم و در نهایت به المان مربوطه نام انیمیشن رو میدیم: نمونه کد زیر:
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
/* کد بالا با کد زیر یکی هست */
0% {background-color: red;}
100% {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite; /* تکرار نا محدودی */
animation-timing-function: ease-in;
/* خلاصه شده کد بالا رو میتونیم در یک خط بنویسم */
/* ----- این بهتره ------ */
animation: example 4s infinite ease-in;
}مثال: ساخت لودینگ انیمیشی دایره ای محو شونده
با کد زیر یک دایره آبی رنگ در صفحه رسم کردیم، که از یک نقطه ریز شروع به بزرگ شدن و همزمان محو شدن میکنه که یه حالت انیمیشنی جذابی داره، نمونه کدش رو ببینید: (دموی آنلاین)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.circle_loading {
width: 50px;
height: 50px;
border-radius: 50px;
background-color: blue;
animation: circleAnimation 4s infinite ease-in;
}
/* The animation code */
@keyframes circleAnimation {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="circle_loading"></div>
</body>
</html>