۱
آبان

جلسه ۵۰ : انیمیشن در css

دسته‌بندی‌ها :

جزئیات
نوع مطلبآموزشی

فهرست

مقدمه

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

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

در ادامه بحث جلوه های ویژه در css در این پست به آموزش چگونگی کار با ویژگی انیمیشن در css پرداخته ایم.

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

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

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

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

پشتیبانی animation در مرورگرها

در جدول زیر اعداد مربوط به هر مرورگر اولین نسخه ی آن مرورگر که از قابلیت animation پشتیبانی می کند را نشان می دهد.

پیشوندهای -webkit-, -moz- یا -o- به این معنی است که در آن نسخه از مرورگر مربوطه باید از این پیشوندها در تعریف انیمیشن استفاده کنید.

ساختار کلی

مثال: در این مثال ابتدا خصوصیاتی که از عنصر 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;
}

/* 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 {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {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 {

0% {background-color: red;}

25% {background-color: yellow;}

50% {background-color: blue;}

100% {background-color: green;}

}

/* The element to apply the animation to */

div {

width: 100px;

height: 100px;

background-color: red;

animation-name: example;

animation-duration: 4s;

}

خودتان امتحان کنید »

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

مثال : مثال -2

/* The animation code */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {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;
}

/* The animation code */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {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 برای مشخص کردن تاخیر اجرای انیمیشن استفاده می شود.

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

مثال : تاخیر 2 ثانیه ای در اجرای انیمیشن

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

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

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

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

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

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

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

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

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

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

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 {

width: 100px;

height: 100px;

background: red;

position: relative;

animation-name: example;

animation-duration: 3s;

animation-delay: 2s;

animation-fill-mode: both;

}

خودتان امتحان کنید »

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

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

مثال : تعریف 6 خصوصیت انیمیشن

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

div {

animation-name: example;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

}

خودتان امتحان کنید »

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

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

div {
  animation: example 5s linear 2s infinite alternate;
}

div {

animation: example 5s linear 2s infinite alternate;

}

خودتان امتحان کنید »

خصوصیات 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	منحنی سرعت انیمیشن را مشخص می کند.

کلام آخر

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

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 12

مهدی
فروردین ۲, ۱۴۰۰
بسیار عالی دستتون درد نکنه و خسته نباشید
یه سوال
چه جوری میشه وقتی اسکرول میشه انیمیشن اجرا بشه ؟
میدونم کتابخانه animation.css و aos هست ولی میخواستم بدون اونا این کارو انجام بدم
پاسخ دادن
محمد عزیزی
اردیبهشت ۱, ۱۴۰۰
سلام. خدا قوت و خسته نباشید.
من چطور می تونم این کد زیر حاوی انیمیشن رو:
#myDIV {
width: 100%;
height: 500px;
border: 1px solid rgb(156, 19, 149);
background-image: url(‘https://uupload.ir/files/f1cb_8885-m1in-min.png’);
background-position: top left;
animation: mymove 5s infinite;
}
@keyframes mymove {
۵۰% {background-position: center;}
}
بیارم و css هاش رو فقط در تگ زیر قرار بدم؟
ممنون میشم راهنماییم کنید.
پاسخ دادن
محمد عزیزی
اردیبهشت ۱, ۱۴۰۰
کدها در کامنت حذف شدن متاسفانه.
سوال بنده اینه که چطور می تونم کد css رو از داخل تگ هد و استایل بیارم بیرون و بزارم در تگ بادی و سپس تگ div?
ممنون میشم راهنماییم کنید.
پاسخ دادن
- پی وی لرن
  اردیبهشت ۱, ۱۴۰۰
  با سلام
  متاسفانه منظور شما را متوجه نشدم دقیقا چه مشکلی دارید و چه کاری می خواهید انجام دهید که در قسمت header امکان پذیر نیست شما اگر می خواهید به body و div استایل دهید که به هر کدام کلاس دهید و در فایل css استایل های آن را قرار دهید و اگر کد را فقط می خواهید انتقال دهید و سیستم مدیریت محتوای شما وردپرس است کد را از header.php به index.php باید انتقال دهید.
  پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۵۰ : انیمیشن در css

مقدمه

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

پشتیبانی animation در مرورگرها

ساختار کلی

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

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

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

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

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

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

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

خصوصیات animation در CSS

کلام آخر

لیست مطالب دوره

آموزش های پیشرفته CSS

گریدبندی در css

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ