CSS-Animation-Time-of-Day   animation ها د وبسایت شما احساسی خاص ایجاد میکنند . استفاده از وبسایت را راحت تر و دلپذیرتر میکنند و در نهایت بهبود رابط کاربری باعث افزایش رضایت کاربران شما میشوند . با استفاده از animation ها شما میتوانید جدا از زیبا سازی سایت , امکانات سایت خود را نیز تقویت کنید. برای مثال استفاده از یکم انیمیشن در یک فرم جستجو میتواند کمی وسوسه کننده باشد.  

CSS Animation

css animation به شما این امکان را میدهد که style اولیه یک المان را در یک بازه زمانی تغییر دهید . تعریف کردن یک انیمیشن در css دو مرحله دارد.  

@keyframes

به وسیله keyframes ما مشخص میکنیم که در هر انیمیشن یک المان در هر لحظه دارای چه استایلی است . دو keyframe اصلی وجود دارد که در ساخت حتما باید آن ها را لحاظ کنیم . یکی برای لحظه شروع و یک keyframe هم برای لحظه پایان . این دو را بصورت 0% و 100% یا با اسامی آنها یعنی from و to مشخص میکنیم.   
@keyframes myanimation {
    0% {background-color: rgb(243, 243, 65);}
    to {background-color: rgb(251, 179, 45);}
}
  به نامی که بعد از @keyframes آمده است دقت کنید . به این روش ما برای keyframe ها نام گذاری میکنیم تا بعدا در ساخت انیمیشن از آن استفاده کنیم . برای مثال نام keyframe ساخته شده در نمونه بالا myanimation است . یک نمونه keyframe که علاوه بر from و to یک گام در مرحله 50% هم دارد :‌  
@keyframes myanimation {
    0% {background-color: rgb(243, 243, 65);}
    50% {background-color: rgb(243, 83, 25);}
    to {background-color: rgb(251, 179, 45);}
}
 

تعریف Animation در css

برای تعریف animation در استایل سایت خود باید دو مورد را حتما مشخص کنیم . یکی نام keyframe و دیگری طول مدت انیمیشن است . موارد دیگر الزامی نیستند .
a {
    /* Animation styles */
    animation-name: myanimation;
    animation-duration: 2s;
    /* Other styles */
    display: inline-block;
    border: 3px solid rgb(62, 62, 241);
    border-radius: 10px;
    padding: 1em;
    color: rgb(62, 62, 241);
}
myanimation را که در مرحله قبل ساخته بودیم در اینجا به عنوان animation-name قرار میدهیم . در بخش animation-duration هم طول مدت اجرا را وارد میکنیم .  

نمونه کد

[codepen_embed height="265" theme_id="dark" slug_hash="NWWQgeg" default_tab="css,result" user="hosseind600" preview="true" data-preview="true"]See the Pen simple css animation by hosein (@hosseind600) on CodePen.[/codepen_embed] ادامه دارد...">
               
استدیو خلاقیت دایان
               
دنیای شیرین وب دولوپمنت

آشنایی با animation ها در css

امروزه کمتر وبسایتی را میبینید که در طراحی خود از animation استفاده نکرده باشد . نحوه ساخت animation در css را با هم بررسی میکنیم .

CSS-Animation-Time-of-Day

 

animation ها د وبسایت شما احساسی خاص ایجاد میکنند . استفاده از وبسایت را راحت تر و دلپذیرتر میکنند و در نهایت بهبود رابط کاربری باعث افزایش رضایت کاربران شما میشوند .

با استفاده از animation ها شما میتوانید جدا از زیبا سازی سایت , امکانات سایت خود را نیز تقویت کنید. برای مثال استفاده از یکم انیمیشن در یک فرم جستجو میتواند کمی وسوسه کننده باشد.

 

CSS Animation

css animation به شما این امکان را میدهد که style اولیه یک المان را در یک بازه زمانی تغییر دهید . تعریف کردن یک انیمیشن در css دو مرحله دارد.

  • مشخص کردن نحوه ای اجرای انیمیشن در زمان های مختلف
  • مشخص کردن زمان انیمیشن – تعداد اجرا – زمان اجرا – تاخیر در اجرا و …

 

@keyframes

به وسیله keyframes ما مشخص میکنیم که در هر انیمیشن یک المان در هر لحظه دارای چه استایلی است . دو keyframe اصلی وجود دارد که در ساخت حتما باید آن ها را لحاظ کنیم . یکی برای لحظه شروع و یک keyframe هم برای لحظه پایان . این دو را بصورت 0% و 100% یا با اسامی آنها یعنی from و to مشخص میکنیم. 

 

@keyframes myanimation {
    0% {background-color: rgb(243, 243, 65);}
    to {background-color: rgb(251, 179, 45);}
}

 

به نامی که بعد از @keyframes آمده است دقت کنید . به این روش ما برای keyframe ها نام گذاری میکنیم تا بعدا در ساخت انیمیشن از آن استفاده کنیم . برای مثال نام keyframe ساخته شده در نمونه بالا myanimation است .

یک نمونه keyframe که علاوه بر from و to یک گام در مرحله 50% هم دارد :‌

 

@keyframes myanimation {
    0% {background-color: rgb(243, 243, 65);}
    50% {background-color: rgb(243, 83, 25);}
    to {background-color: rgb(251, 179, 45);}
}

 

تعریف Animation در css

برای تعریف animation در استایل سایت خود باید دو مورد را حتما مشخص کنیم . یکی نام keyframe و دیگری طول مدت انیمیشن است . موارد دیگر الزامی نیستند .

a {
    /* Animation styles */
    animation-name: myanimation;
    animation-duration: 2s;
    /* Other styles */
    display: inline-block;
    border: 3px solid rgb(62, 62, 241);
    border-radius: 10px;
    padding: 1em;
    color: rgb(62, 62, 241);
}

myanimation را که در مرحله قبل ساخته بودیم در اینجا به عنوان animation-name قرار میدهیم . در بخش animation-duration هم طول مدت اجرا را وارد میکنیم .

 

نمونه کد

See the Pen simple css animation by hosein (@hosseind600) on CodePen.dark

ادامه دارد…

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نکته آموزشی

<title> مهمترین بخش یک صفحه وبسایت است که عنوان محتویات صفحه را نمایش میگذارید .
تگ عنوان تنها میتواند بین ۶۰ تا ۸۰ کاراکتر باشد . پس در انتخاب عنوان مطالب دقت کنید که در کنار رساندن موضوع کوتاه یا خیلی بلند نباشند.

DevChat