متحرک سازی با CSS3 در طراحی سایت

به واسط زبان CSS3 شما به اسانی می توانید ایفکت های متحرک سازی را در طراحی سایت خود پیاده نمایید. که در این صورت شما متحرک سازی را در کنار سرعت بالا در طراحی وب سایت خود اجرا می نمایید. البته در مرورگرها با ورژن های پایین این قابلیت پشتیبانی نمی شود.

تعیین استایل های مختلف این امکان را فراهم می آورد که با تغییر و مرجع دهی به استایل های متفاوت، به نوعی تحرک در طراحی سایت خود ایجاد نمایید. در اینجا مثالی از نحوه جایدهی کد CSS3 در تگ div را به نمایش گذاشته ایم.

div {
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    animation: myfirst 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    from {background: red;}
    to {background: yellow;}
}

/* Standard syntax */
@keyframes myfirst {
    from {background: red;}
    to {background: yellow;}
}

شما می توانید به آسانی در میان استایل های مختلف و به هر مدت زمانی که قصد دارید تغییر و جابجایی نمایید. می توانید به خصیصه ها درصد ویا با استفاده از کلمه کلیدی "from" و "to"  این تغییر را به نمایش بگذارید.

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

می بینید که به راحتی با اضافه نمودن کدهای CSS3 در طراحی سایت خود نماهای زیبا را در کنار سرعت بالا به صفحه وب سایت خود بیفزایید که به نوعی موجب جلب توجه و نظر کاربران سایت خود می شوید و در سئو وب سایت خود نقش مثبتی را ایفا می نمایید.