@رحولیسمرهول
Front-end Web Developer و Blogger
تصویر سرب با مجوز از Alltechbuzz در پکسل.
از انیمیشن های وب می توان برای جلب توجه ، تعامل بهتر مردم و برقراری ارتباط روشن تر و م .ثرتر استفاده کرد. این می تواند بیش از یک صفحه وب ساکن توجه افراد را به خود جلب و جلب کند.
@keyframes
@keyframesقانون
وقتی سبک های CSS را در داخل قانونkeyframes مشخص کنید ، انیمیشن در زمان های خاص به تدریج از سبک فعلی به سبک جدید تغییر می کند.
انیمیشن با استفاده از دو نوع کلمه کلیدی مشخص شده است: از جانب – به و
0% - 100%.
توجه: با استفاده از درصد ، می توانید هر تعداد سبک را که دوست دارید تغییر دهید ، برای مثال روشن (0٪ ، 20٪ ، 40٪ ، 80٪ و 100٪).
برای به کار انداختن یک انیمیشن ، باید انیمیشن را به یک عنصر متصل کنید.
.content{
width: 100px;
height: 100px;
color: orange;
animation-name: false;
animation-duration: 0.3s;
}
@keyframes fade {
from{ opacity: 0; }
to{ opacity: 1; }
}
اگر مدت زمان انیمیشن ویژگی مشخص نشده است ، هیچ انیمیشنی رخ نخواهد داد ، زیرا مقدار پیش فرض آن است 0 ثانیه.
یک انیمیشن را به تأخیر بیندازید
animation-delayویژگی تأخیر برای شروع انیمیشن را مشخص می کند
تکرار یک انیمیشن
animation-iteration-countویژگی تعداد دفعات اجرای یک انیمیشن را مشخص می کند.