انیمیشن‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

انیمیشن‌ها در CSS

CSS اجازه می‌دهد که روی عناصر HTML بدون استفاده از جاوا اسکریپت یا Flash انیمیشن ایجاد کنید.[۱]

در این فصل شما درمورد ویژگی‌های زیر مطالبی را خواهید آموخت:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

پشتیبانی مرورگرها از انیمیشن‌ها

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

ویژگی (به انگلیسی: Property) Chrome Internet Explorer / Edge Firefox Safari Opera
@keyframes ۴۳٫۰ ۱۰٫۰ ۱۶٫۰ ۹٫۰ ۳۰٫۰
animation-name ۴۳٫۰ ۱۰٫۰ ۱۶٫۰ ۹٫۰ ۳۰٫۰
animation-duration ۴۳٫۰ ۱۰٫۰ ۱۶٫۰ ۹٫۰ ۳۰٫۰
animation-delay ۴۳٫۰ ۱۰٫۰ ۱۶٫۰ ۹٫۰ ۳۰٫۰
animation-iteration-count ۴۳٫۰ ۱۰٫۰ ۱۶٫۰ ۹٫۰ ۳۰٫۰
animation-direction ۴۳٫۰ ۱۰٫۰ ۱۶٫۰ ۹٫۰ ۳۰٫۰
animation-timing-function ۴۳٫۰ ۱۰٫۰ ۱۶٫۰ ۹٫۰ ۳۰٫۰
animation-fill-mode ۴۳٫۰ ۱۰٫۰ ۱۶٫۰ ۹٫۰ ۳۰٫۰
animation ۴۳٫۰ ۱۰٫۰ ۱۶٫۰ ۹٫۰ ۳۰٫۰

انیمیشن‌های CSS چه هستند؟

انیمیشن به یک عنصر اجازه می‌دهد به تدریج از یک استایل به استایلی دیگر تغییر کند.

می‌توانید هر تعداد ویژگی CSS را که می‌خواهید، هرچند بار که بخواهید تغییر بدهید.

برای استفاده از انیمیشن‌های CSS، ابتدا باید تعدادی keyframe برای انیمیشن مشخص کنید.

Keyframeها نگهدارنده استایلی هستند که عنصر در زمان‌های مشخص خواهد داشت.

قانون @keyframes

زمانی که استایل‌های CSS را درون قانون @keyframes مشخص می‌کنید، انیمیشن به تدریج از استایل فعلی به استایل جدید تغییر خواهد کرد.

برای اینکه انیمیشن کار کند، می‌بایست انیمیشن را به یک کنترل وصل (به انگلیسی: bind) کنید.

مثال زیر انیمیشن "مثال" را به عنصر <div> متصل می‌کند. انیمیشن ۴ ثانیه ادامه خواهد داشت، و به تدریج ویژگی background-color عنصر <div> را از "red" به "yellow" تغییر می‌دهد:

مثال
 1 /* The animation code */
 2 @keyframes example {
 3   from {background-color: red;}
 4   to {background-color: yellow;}
 5 }
 6 
 7 /* The element to apply the animation to */
 8 div {
 9   width: 100px;
10   height: 100px;
11   background-color: red;
12   animation-name: example;
13   animation-duration: 4s;
14 }


نکته: ویژگی animation-duration مدت زمانی که انیمیشن می‌بایست طول بکشد را مشخص می‌کند. اگر ویژگی animation-duration مشخص نشود، هیچ انیمیشنی اجرا نخواهد شد، زیرا مقدار پیش‌فرض این ویژگی 0s (صفر ثانیه) است.

در مثال بالا با استفاده از کلمه کلیدی “from” و "to" (که ۰٪ نشان دهندهٔ (آغاز) و ۱۰۰٪ نشان دهندهٔ (کامل شدن) است) مشخص کرده ایم که چه زمانی استایل تغییر خواهد کرد.

همچنین استفاده از درصد نیز امکان پذیر است. با استفاده از درصد، همچنین می‌توانید هر تعداد که می خواهید تغییر استایل اضافه کنید.

مثال زیر ویژگی background-color عنصر <div> را هنگامی که انیمیشن به اندازه ۲۵٪ و ۵۰٪ کامل شود، تغییر خواهد داد و دوباره این کار زمانی که انیمیشن به‌طور ۱۰۰٪ کامل شد صورت می‌گیرد:

مثال
 1 /* The animation code */
 2 @keyframes example {
 3   0%   {background-color: red;}
 4   25%  {background-color: yellow;}
 5   50%  {background-color: blue;}
 6   100% {background-color: green;}
 7 }
 8 
 9 /* The element to apply the animation to */
10 div {
11   width: 100px;
12   height: 100px;
13   background-color: red;
14   animation-name: example;
15   animation-duration: 4s;
16 }


مثال زیر مقادیر هردو ویژگی background-color و position عنصر <div> را هنگامی که انیمیشن به میزان ۲۵٪، ۵۰٪ کامل شود، تغییر خواهد داد و این کار را هنگامی که انیمیشن ۱۰۰٪ کامل شد نیز دوباره انجام می دهد:

مثال
 1 /* The animation code */
 2 @keyframes example {
 3   0%   {background-color:red; left:0px; top:0px;}
 4   25%  {background-color:yellow; left:200px; top:0px;}
 5   50%  {background-color:blue; left:200px; top:200px;}
 6   75%  {background-color:green; left:0px; top:200px;}
 7   100% {background-color:red; left:0px; top:0px;}
 8 }
 9 
10 /* The element to apply the animation to */
11 div {
12   width: 100px;
13   height: 100px;
14   position: relative;
15   background-color: red;
16   animation-name: example;
17   animation-duration: 4s;
18 }


به تأخیر انداختن انیمیشن

ویژگی animation-delay یک تأخیر برای آغاز یک انیمیشن مشخص می‌کند.

مثال زیر یک تأخیر دو ثانیه ای را قبل از آغاز انیمیشن دارد:

مثال
1 div {
2   width: 100px;
3   height: 100px;
4   position: relative;
5   background-color: red;
6   animation-name: example;
7   animation-duration: 4s;
8   animation-delay: 2s;
9 }


استفاده از مقادیر منفی مجاز است. اگر از مقادیر منفی استفاده کنید، انیمیشن طوری آغاز می‌شود که به نظر می‌رسد قبلاً برای N ثانیه نمایش داده می شده است.

در مثال زیر، انیمیشن طوری آغاز می‌شود که به نظر می‌رسد قبلاً برای ۲ ثانیه نمایش داده می شده است.

مثال
1 div {
2   width: 100px;
3   height: 100px;
4   position: relative;
5   background-color: red;
6   animation-name: example;
7   animation-duration: 4s;
8   animation-delay: -2s;
9 }


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

ویژگی animation-iteration-count تعداد دفعات اجرای یک انیمیشن را مشخص می‌کند:

مثال زیر مشخص می‌کند که انیمیشن قبل از اتمام سه بار اجرا خواهد شد:

مثال
1 div {
2   width: 100px;
3   height: 100px;
4   position: relative;
5   background-color: red;
6   animation-name: example;
7   animation-duration: 4s;
8   animation-iteration-count: 3;
9 }


مثال زیر از مقدار "infinite" (بی‌نهایت) استفاده می‌کند تا اجرای انیمیشن برای همیشه ادامه پیدا کند:

مثال
1 div {
2   width: 100px;
3   height: 100px;
4   position: relative;
5   background-color: red;
6   animation-name: example;
7   animation-duration: 4s;
8   animation-iteration-count: infinite;
9 }


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

ویژگی animation-direction مشخص می‌کند که یک انیمیشن چگونه می‌بایست اجرا شود، رو به جلو، رو به عقب یا به صورت یکی در میان.

ویژگی animation-direction می‌تواند مقادیر زیر را داشته باشد:

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


مثال زیر انیمیشن را در جهت برعکس اجرا خواهد کرد:

مثال
1 div {
2   width: 100px;
3   height: 100px;
4   position: relative;
5   background-color: red;
6   animation-name: example;
7   animation-duration: 4s;
8   animation-direction: reverse;
9 }


مثال زیر از مقدار "alternate" برای اجرای انیمیشن ابتدا به صورت رو به جلو، سپس به صورت وارونه استفاده می‌کند:

مثال
 1 div {
 2   width: 100px;
 3   height: 100px;
 4   position: relative;
 5   background-color: red;
 6   animation-name: example;
 7   animation-duration: 4s;
 8   animation-iteration-count: 2;
 9   animation-direction: alternate;
10 }


مثال زیر از مقدار "alternate-reverse" برای اجرای انیمیشن ابتدا به صورت واورنه، سپس به صورت رو به جلو (forward) استفاده می‌کند:

مثال
 1 div {
 2   width: 100px;
 3   height: 100px;
 4   position: relative;
 5   background-color: red;
 6   animation-name: example;
 7   animation-duration: 4s;
 8   animation-iteration-count: 2;
 9   animation-direction: alternate-reverse;
10 }


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

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

ویژگی animation-timing-function می‌تواند مقدارهای زیر را داشته باشد:

  • ease- حالت انیمیشن که به آرامی آغاز می‌شود، سپس سریع شده، و در پایان به آرامی پایان می‌یابد را مشخص می‌کند (این ویژگی پیش‌فرض است)
  • linear- حالت انیمیشن با یک سرعت یکسان از ابتدا تا انتها را مشخص می‌کند
  • ease-in- حالت انیمیشن با آغاز آرام را مشخص می‌کند
  • ease-out - حالت انیمیشن با پایان آرام را مشخص می‌کند
  • ease-in-out - حالت انیمیشن با آغاز و پایان آرام را مشخص می‌کند
  • cubic-bezier(n,n,n,n) - به شما اجازه می‌دهد مقادیر خود را درون تابع cubic-bazier تعریف کنید


مثال زیر تفاوت برخی از منحنی‌های سرعت را که می‌توان از آنها استفاده کرد را نشان می‌دهد:

مثال
1 #div1 {animation-timing-function: linear;}
2 #div2 {animation-timing-function: ease;}
3 #div3 {animation-timing-function: ease-in;}
4 #div4 {animation-timing-function: ease-out;}
5 #div5 {animation-timing-function: ease-in-out;}


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

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

ویژگی animation-fill-mode هنگامی که انیمیشن اجرا نمی شود (قبل از آغاز اجرا، یا بعد از پایان اجرا، یا هر دوی آن)، برای عنصر هدف یک استایل مشخص می کند مشخص می‌کند.

ویژگی animation-fill-mode می‌تواند مقادیر زیر را داشته باشد:

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


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

مثال
1 div {
2   width: 100px;
3   height: 100px;
4   background: red;
5   position: relative;
6   animation-name: example;
7   animation-duration: 3s;
8   animation-fill-mode: forwards;
9 }


مثال زیر به عنصر <div> اجازه می‌دهد مقادیر استایلی که قبل از آغاز انیمیشن توسط اولین keyframe تنظیم شده‌است را حفظ کند (هنگام بازه ویژگی Animation delay):

مثال
 1 div {
 2   width: 100px;
 3   height: 100px;
 4   background: red;
 5   position: relative;
 6   animation-name: example;
 7   animation-duration: 3s;
 8   animation-delay: 2s;
 9   animation-fill-mode: backwards;
10 }


مثال زیر به عنصر <div> اجازه می‌دهد مقادیر استایلی که را قبل از آغاز انیمیشن توسط اولین keyframe تنظیم شده‌است، حفظ کند، و مقادیر استایل آخرین keyframe را هنگام به پایان رسیدن انیمیشن حفظ کند:

مثال
 1 div {
 2   width: 100px;
 3   height: 100px;
 4   background: red;
 5   position: relative;
 6   animation-name: example;
 7   animation-duration: 3s;
 8   animation-delay: 2s;
 9   animation-fill-mode: both;
10 }


ویژگی مختصر Animation

مثال زیر از شش ویژگی انیمیشن استفاده می‌کند:

مثال
1 div {
2   animation-name: example;
3   animation-duration: 5s;
4   animation-timing-function: linear;
5   animation-delay: 2s;
6   animation-iteration-count: infinite;
7   animation-direction: alternate;
8 }


حالت انیمیشن یکسانی همانند مثال بالا را می‌توان با استفاده از ویژگی مختصر animation به دست آورد:

مثال
div {
  animation: example 5s linear 2s infinite alternate;
}


خود را با تمرین ها امتحان کنید!

ویژگی‌های Animation در CSS

جدول زیر تمامی قوانین @keyframes و تمامی ویژگی‌های انیمیشن در CSS را لیست می‌کند:

ویژگی توضیحات
@keyframes کد انیمیشن را مشخص می‌کند
animation یک ویژگی مختصر برای تنظیم تمامی ویژگی‌های انیمیشن
animation-delay یک تأخیر را برای هنگام آغاز انیمیشن مشخص می‌کند
animation-direction مشخص می کند که انیمیشن می‌بایست به صورت forwards , backwards یا به صورت یکی درمیان (به انگلیسی: alternate cycles) اجرا شود
animation-duration مشخص می‌کند که چه مدت زمانی می‌بایست طول بکشد تا انیمیشن یک دور کامل اجرا شود
animation-fill-mode استایل عنصر را برای زمانی که انیمیشن در حال اجرا نیست مشخص می‌کند (قبل از اجرا، بعد از اجرا، یا هر دو)
animation-iteration-count تعداد دفعات اجرای انیمیشن را مشخص می‌کند
animation-name نام @keyframe انیمیشن را مشخص می‌کند
animation-play-state مشخص می‌کند انیمیشن در حال اجراست یا متوقف شده‌است
animation-timing-function منحنی سرعت انیمیشن را مشخص می‌کند


منابع آموزشی