میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

انیمیشن (Animations) در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش انیمیشن (Animations) در CSS با من همراه باشید.

قابلیت انیمیشن در css به شما اجازه می دهد که با استفاده از ویژگی animations ، برای اکثر عناصر html قابلیت انیمیشن ایجاد کنید. بدون اینکه از جاوا اسکریپت و یا فلش استفاده کنید! با استفاده از این ویژگی می توانید قالب وب سایت خود را پویا و جذاب تر کنید. و کاربران از حضور طولانی در وب سایت شما لذت می برند.

 


کار با ویژگی انیمیشن در css

ویژگی animations اجازه می دهد که یک عنصر در یک بازه ی زمانی از یک style به style دیگری تغییر کند. با استفاده از این ویژگی می توانید خصوصیات بسیاری از یک عنصر html را در یک بازه ی زمانی تغییر دهید.

برای استفاده از ویژگی انیمیشن در css ، شما ابتدا باید یک keyframes برای این ویژگی تعریف کنید. ویژگی keyframes خصوصیاتی که روی عنصر html در زمان اجرای animations ، تغییر می کند را نگه می دارد.

 

ساختار کلی

مثال: در این مثال ابتدا خصوصیاتی که از عنصر html قرار است تغییر کند در داخل یک keyframes به نام  ” example ”  تعریف می شود. سپس ویژگی animations باید هم نام keyframes که تعریف کرده ایم یعنی ” example ” نام گذاری شود تا ارتباط بین این دو ویژگی برقرار شود. و در نهایت مدت زمان اثر گذاری انیمیشن مشخص شده است:

مثال : نمونه انیمیشن
/* 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-duration (که مدت زمان اجرای انیمیشن را مشخص می کند) را مشخص نکنید. بصورت پیش فرض “۰” در نظر گرفته می شود . و هیچ نتیجه ای در اجرا مشاهده نخواهید کرد.

 


چندین عمل در یک اجرای animation

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

مثال: در این مثال زمانی که انیمیشن ۲۵ درصد کامل شده سپس زمانی که ۵۰ درصد کامل می شود و به همین صورت تا ۱۰۰ درصد. برای هر کدام از این قسمت ها رنگ پس زمینه عنصر html تغییر می کند:

مثال : حالت دوم تعریف تغییرات در انیمیشن
/* The animation code */
@keyframes example {
    ۰%   {background-color: red;}
    ۲۵%  {background-color: yellow;}
    ۵۰%  {background-color: blue;}
    ۱۰۰% {background-color: green;}
}


/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

مثال ۲: می توانید در هر کدام از قسمت ها چندین عمل را تعریف کنید:

/* The animation code */
@keyframes example {
    ۰%   {background-color:red; left:0px; top:0px;}
    ۲۵%  {background-color:yellow; left:200px; top:0px;}
    ۵۰%  {background-color:blue; left:200px; top:200px;}
    ۷۵%  {background-color:green; left:0px; top:200px;}
    ۱۰۰% {background-color:red; left:0px; top:0px;}
}


/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

تاخیر در اجرای انیمیشن

از خصوصیت animation-delay برای مشخص کردن تاخیر اجرای انیمیشن استفاده می شود.

مثال زیر تا قبل از شروع انیمیشن تاخیر ۲ ثانیه دارد:

مثال : تاخیر ۲ ثانیه ای در اجرای انیمیشن
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

در مثال زیر animation-delay مقدار منفی (-۲) دارد، به این ترتیب از مدت زمان اجرا کم می شود، و انیمیشن ۲ ثانیه اجرا خواهد شد:

مثال : مقدار منفی در animation_delay
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

تعداد دفعات اجرای انیمیشن

با استفاده از ویژگی animation-iteration-count می توانید تعداد دفعات تکرار شدن انیمیشن را تعیین کنید

مثال:

مثال : خصوصیت animation_delay
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

مثال ۲: در این مثال با تخصیص مقدار “infinite” به ویژگی animation-iteration-count ، انیمیشن دائم اجرا خواهد شد:

مثال : مقدار infinite

 

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

 


اجرای انیمیشن در جهت معکوس یا در چرخه های متناوب

با استفاده از ویژگی animation-direction می تواندی تعیین کنید که انیمیشن در جهت معکوس یا در چرخه های متناوب اجرا شود. مقادیر ویژگی  animation-direction به شرح زیر است:

  • normal : انمیشن بصورت عادی اجرا می شود. (پیش فرض).
  • reverse : انیمشن در جهت معکوس اجرا می شود.
  • alternate : ابتدا انیمیشن در حالت عادی و سپس معکوس اجرا می شود.
  • alternate-reverse : ابتدا انیمیشن در حالت معکوس و سپس عادی اجرا می شود. (برعکس حالت alternate).

مثال ۱:

مثال : اجرای معکوس انیمیشن
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-direction: reverse;
}
مثال ۲:
مثال : مقدار alternate
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}

مثال ۳:

مثال : مقدار alternate-reverse
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 2;
    animation-direction: alternate-reverse;
}

مشخص کردن منحنی سرعت انیمیشن

خصوصیت animation-timing-function منحنی سرعت انیمیشن را مشخص می کند.

خصوصیت animation-timing-function شامل ۶ مقدار زیر است:

  • ease   :  یک انیمیشن با شروع آهسته، پس از آن سریع، و سپس به آرامی پایان می یابد. (این به طور پیش فرض)
  • linear  : یک انیمیشن با همان سرعت را از ابتدا تا انتها مشخص می کند.
  • ease-in   : تعیین یک انیمیشن با شروع آهسته.
  • ease-out  : مشخص کردن انیمیشن با پایان آهسته.
  • ease-in-out  :  تعیین یک انیمیشن با شروع و پایان آهسته.
  • (cubic-bezier(n,n,n,n  :شما می توانید مقادیر خود را در یک عملکرد cubic-bezier تعریف کنید.

مثال زیر شامل تست تمام حالت های فوق می باشد :

مثال : مثال animation-timing-function

 

#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;}

 

 


مشخص کردن fill-mode برای یک انیمیشن

انیمیشن CSS بر یک عنصر قبل از اولین فریم keyframe یا بعد از آخرین فریم keyframe تأثیر نمی گذارد.

خصوصیات anim-fill-mode می تواند این رفتار را برطرف کند.

خصوصیت anim-fill-mode یک style را برای عنصر target مشخص می کند وقتی که انیمیشن پخش نمی شود (قبل از شروع آن، پس از پایان دادن به آن، یا هر دو).

خصوصیت animation-fill-mode شامل مقادیر زیر است :

  • none  : مقدار پیش فرض. انیمیشن قبل و بعد از اجرا هیچ style خاصی برای آن اعمال نمی شود.
  • forwards  : این عنصر مقادیر style را که توسط آخرین فرمان کلید تعیین می شود،مشخص می کند (به جهت حرکت و انیمیشن-تکرار شمارش بستگی دارد.)
  • backwards  : این عنصر مقادیر style را که توسط اولین فریم کلید تعیین شده (بستگی به جهت حرکت انیمیشن) تعیین می کند، دریافت می کند و در طول مدت زمان تاخیر انیمیشن حفظ می شود
  • both  : انیمیشن  از هر دو حالت forwards و backwards پیروی می کند، ویژگی های انیمیشن را در هر دو جهت گسترش می دهد.

مثال زیر اجازه می دهد که عنصر <div> مقادیر style را از آخرین کادر کلید هنگامی که انیمیشن به پایان می رسد را حفظ کند:

مثال : حالت forwards
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

حالت backwards :

مثال : حالت backwards
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

حالت both :

مثال : حالت both
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

خلاصه کردن کدها و خصوصیات انیمیشن

مثال زیر یک حالت استفاده از ۶ خصوصیت انیمیشن را نشان می دهد:

مثال : تعریف ۶ خصوصیت انیمیشن
div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

شما می توانید با استفاده از ویژگی animation تمام خصوصیات فوق را در یک خط کد کوتاه مانند زیر تعریف کنید:

مثال : کوتاه کردن تعداد کدها

خصوصیات animation در CSS

خصوصیتتوضیحات
@keyframesکد animation را مشخص می کند.
animationامکان تعریف تمام خصوصیات زیر را در یک انتساب کوتاه می دهد.
animation-delayمدت تاخیر در شروع اجرای انیمیشن را مشخص می کند.
animation-directionمشخص می کند که آیا انیمیشن باید به جلو، عقب، یا در چرخه های متناوب اجرا شود.
animation-durationمدت زمان اجرای انیمیشن را مشخص می کند.
animation-fill-modeیک Style را برای عنصر مشخص می کند هنگامی که انیمیشن اجرا نمی شود (قبل از شروع آن، پس از پایان دادن به آن، یا هر دو)
animation-iteration-countتعداد دفعات اجرای انیمیشن را مشخص می کند.
animation-nameنام انیمیشن را برای شناسایی در زمان استفاده از @keyframes مشخص می کند.
animation-play-stateتعیین اینکه آیا انیمیشن در حال اجرا است یا متوقف شده است.
animation-timing-functionمنحنی سرعت انیمیشن را مشخص می کند.

 


امیدواریم آموزش انیمیشن (Animations) در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
animation css شرحAnimations در CSScssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل انیمیشن در cssآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش انیمیشن در cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfانیمیشن (Animations) در CSSانیمیشن با cssانیمیشن در CSSانیمیشن متن در cssانیمیشن ها در cssانیمیشن های cssایجاد انیمیشن در cssتکرار انیمیشن در cssدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساخت انیمیشن در cssساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسیکد انیمیشن در css
ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟