کاربرد انیمیشن برای جذابیت سایت
آدرس کوتاه: https://sitedar.com/?p=8108
شما می توانید با ویژگی انیمیشن وب سایت خود را پویا و جذاب کنید و طراحی منحصر به فردی در وب سایت ایجاد کنید.
برای اکثر عناصر HTML با قابلیت animation در Css، بدون استفاده از جاوا اسکریپت و jquery انیمیشن ایجاد کنید.
ویژگی animation اجازه می دهد که یک عنصر HTML در یک بازه زمانی از یک Style به Style دیگری تغییر کند.
برای استفاده از ویژگی animation ابتدا باید یک Keyframe برای این ویژگی تعریف کنید.
مدت زمان اجرای انیمیشن را به بازه های مختلف تقسیم میکنیم و برای هرکدام Style را مشخص میکنیم
در این مثال زمانی که انیمیشن شروع می شود و زمانی که 100 درصد کامل می شود top صفر اختصاص داده ایم.
برای زمانی که انیمیشن تا 50 درصد تکمیل می شود، Top را 70px را اختصاص می دهیم.
در کد html هم فقط یک div ایجاد میکنیم.
کد های HTML:
</div>
کدهای Css:
padding: 150px 0;
clear: both;
position: relative;
overflow: hidden;
}
@keyframes MoveUpTop{
0%, 100% {
top: 0;
}
50% {
top: 70px;
}
}
سپس ویژگی animations باید هم نام keyframes که تعریف کرده ایم یعنی ” MoveUpTop” نام گذاری شود تا ارتباط بین این دو ویژگی برقرار شود.
مقدار infinite باعث می شود تا به صورت دائمی اجرا شود.
مقدار linear هم باعث می شود از ابتدا تا انتها با یک سرعت مشخص باشد.
کد css:
content: “”;
position: absolute;
left: 41px;
top: 18px;
background:url(./../../../wp-content/uploads/2021/04/circle-small.png);
background-repeat: no-repeat;
height: 270px;
width: 270px;
animation: MoveUpTop 2.5s linear infinite;
z-index: -1;
-webkit-animation-duration: 2.5s;
animation-duration: 2.5s;
}