کد انیمیشن animation در طراحی سایت موجب متحرک سازی بخش های مختلف می شود که در نتیجه امر زیبایی را به صفحه طراحی وب سایت شما می بخشد. کدهای انیمیشن موجب تعیین کد رنگ های مختلف و نیز تعیین سرعت تحرک می باشد. می توانید برای div خودعرض و ارتفاع مشخص تعیین نمایید و حال با تغییر رنگ بک گراند و پس زمینه عکس نوعی تحرک و انیمیشن در صفحه طراحی وب سایت خود ایجاد نمایید.
/* The animation code */
@keyframes example {
from {background-color: red;}
to {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 در صفحه طراحی سایت شما ایجاد شده است و نیز زمان و سرعت خاصی را برای این تحرک در نظر گرفتیم. در زیر لیستی از انواع حرکت که برای انیمیشن در نظر گرفته می شود را بیان می نماییم.
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
هر یک از کدهای بالا نوعی از تحرک را در صفحه طراحی وب سایت ایجاد می نماید که موجب زیبایی صفحه طراحی سایت شما می بخشد و در نتیجه امر بهبود را در سئو سایت و بهینه سازی سایت شاهد خواهیم بود. انیمیشن و تحرک علاوه بر زیبایی موجب جلب توجه کاربر به طراحی سایت شما می شود که در رفتار کاربر با طراحی وب سایت شما موثر خواهد بود و با تجربه خوب کاربر تمایل به برگشت به طراحی وب سایت شما را افزایش می دهد.
