آموزش ساخت انیمیشن در css

0 1,666 خواندن این مطلب 8 دقیقه زمان میبرد

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

انیمشن در css

CSS امکان استفاده از انیمیشن عناصر HTML را بدون استفاده از JavaScript یا Flash فراهم می کند!

در این قسمت با خصوصیات زیر آشنا می شوید:

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

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

ویژگی ها	کروم	اکسپلورر	فایرفاکس	سافاری	اپرا
@keyframes	43.0	10.0	16.0	9.0	30.0
animation-name	43.0	10.0	16.0	9.0	30.0
animation-duration	43.0	10.0	16.0	9.0	30.0
animation-delay	43.0	10.0	16.0	9.0	30.0
animation-iteration-count	43.0	10.0	16.0	9.0	30.0
animation-direction	43.0	10.0	16.0	9.0	30.0
animation-timing-function	43.0	10.0	16.0	9.0	30.0
animation-fill-mode	43.0	10.0	16.0	9.0	30.0
animation	43.0	10.0	16.0	9.0	30.0

انیمیشن در CSS چیست؟

انیمیشن اجازه می دهد تا یک عنصر در طی زمان خصوصیات رفتاری و ظاهر خود را تغییر دهد.

شما می توانید بسیاری از ویژگی های CSS مورد نظر خود را تغییر دهید. برای استفاده از انیمیشن در CSS، ابتدا باید چندین کلیدواژه را برای انیمیشن مشخص کنید.

Keyframes مراحل و استایل‌های انیمیشن‌ در CSS را تعریف می‌کند.

@keyframes چیست؟

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

به قطعه کد زیر توجه کنید، با کمک انیمیشن “example”، تگ <div> را به انیمیشن تبدیل میکنیم. انیمیشن 4 ثانیه دوام خواهد داشت و به تدریج رنگ پس زمینه عنصر را از “قرمز” به “زرد” تغییر می دهد:

<!DOCTYPE html>
<html >
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

نکته : خاصیت انیمیشن در CSS با المنت animation-duration مشخص می شود که نشان می دهد انیمیشن چه مدت طول می کشد تا به پایان برسد. اگر المنت animation-duration مشخص نشده باشد، انیمیشن رخ نخواهد داد، زیرا مقدار پیش فرض آن 0 ثانیه است. در مثال بالا مشخص کردیم که با استفاده از کلمات کلیدی “from” و “to” (که نشان دهنده 0٪ (شروع) و 100٪ (کامل)) استایل تغییر خواهد کرد، همچنین می توان از درصد استفاده کرد. با استفاده از درصد، می توانید هر چقدر که می خواهید استایل را تغییر دهید. در صورتی که انیمیشن 25٪ کامل شود، 50٪ کامل و دوباره پس از اتمام انیمیشن 100٪ کامل شد، مثال زیر رنگ پس زمینه عنصر را تغییر می دهد:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
</style>
</head>
<body>


<div></div>

</body>
</html>

مثال زیر هنگامی که انیمیشن 25٪ کامل، 50٪ کامل و دوباره پس از اتمام انیمیشن 100٪ کامل شود، پس زمینه و موقعیت عنصر را تغییر خواهد داد:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}

@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;}
}
</style>
</head>
<body>


<div></div>

</body>
</html>

خوب، تا اینجا با کارکرد انیمیشن آشنا شدید، اکنون زمان آن رسیده که تمام ویژگی های انیمیشن را به شما معرفی کنیم.

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

ویژگی animation-delay، تأخیر برای شروع یک انیمیشن را مشخص می کند.

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

@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;}
}
</style>
</head>
<body>


<div></div>

</body>
</html>

همچنین می توانید از مقدار منفی استفاده کنید. با استفاده کردن از این خصوصیت، انیمیشن به نظر می رسد که قبلاً برای N ثانیه بازی کرده است ، این حالت را با این مثال بیشتر توضیح میدهیم :

فرض کنید همه دوستانتان در حال تماشای فوتبال هستند که شما نیز به آن ها ملحق می شوید، شما زمانیکه شروع به تماشا می کنید بازی دقیقه 25 را نشان میدهد، 25 دقیقه از بازی گذشته و شما آن را از دست داده اید.

بنابراین زمان منفی به این معناست که به عنوان مثال 5 دقیقه از انیمشین گذشته و شما اکنون آن را مشاهده می کنید.

در مثال زیر ، انیمیشن به گونه ای شروع می شود که گویی قبلاً 2 ثانیه از آن گذشته است:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

@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;}
}
</style>
</head>
<body>

for 2 seconds:</p>

<div></div>


</body>
</html>

تنظیم کنید که چند بار یک انیمیشن در CSS باید اجرا شود

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

مثال زیر انیمیشن را 3 بار قبل از توقف اجرا می کند:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

@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;}
}
</style>
</head>
<body>


<div></div>

</body>
</html>

مثال زیر از مقدار “infinite” استفاده می کند تا انیمیشن برای همیشه ادامه یابد:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@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;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

انیمیشن را معکوس کنید یا چرخه های جایگزین اجرا کنید

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

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

normal – به صورت پیش فرض می باشد و انیمشین در طی زمان عادی پخش می شود.
reverse – انیمیشن در جهت معکوس پخش می شود.
alternate – انیمیشن ابتدا به جلو، سپس به عقب پخش می شود.
alternnare-reverse – انیمیشن ابتدا به عقب، سپس به جلو پخش می شود.

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;  
}

@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;}
}
</style>
</head>
<body>


<div></div>

</body>
</html>

مثال زیر از مقدار “alternate” استفاده می کند تا انیمیشن ابتدا به جلو و سپس به سمت عقب اجرا شود:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;  
}

@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;}
}
</style>
</head>
<body>


<div></div>

</body>
</html>

مثال زیر از مقدار “alternate-reverse” استفاده می کند تا انیمیشن ابتدا به جلو و سپس به سمت عقب اجرا شود:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;  
}

@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;}
}
</style>
</head>
<body>


<div></div>

</body>
</html>

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

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

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

ease – انیمیشن در رمان شروع ابتدا آهسته،سپس تند و دوباره آهسته پخش می شود.
linear – انیمیشن با یک سرعت خاصی از ابتدا تا انتها پخش می شود.
ease-in – انیمیشن به صورت آهسته شروع می شود.
ease-out – انیمیشن به صورت آهسته پایان می یابد.
ease-in-out – انیمیشن شروع و پایانی آهسته دارد
cubic-bezier(n,n,n,n) – به شما اجازه می دهد مقادیر خود را درون تابع cubic-bezier بگذارید.

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s infinite;
}

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

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

حالت fill-mode انیمیشن

انیمیشن های CSS قبل از پخش اولین keyframe یا بعد از پخش آخرین keyframe، روی یک عنصر تأثیر نمی گذارند. خاصیت animation-fill-mode می تواند بر این رفتار غلبه کند.

ویژگی 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 حفظ کند:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
}

@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

مثال زیر به عنصر <div> اجازه می دهد تا مقادیر استایل تنظیم شده توسط اولین keyframe را قبل از شروع انیمیشن بدست آورد (در طول دوره animation-delay):

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: both;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

ویژگی انیمیشن Shorthand

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@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;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

با استفاده از ویژگی انیمیشن shorthand می توانید همان انیمیشن قبلی را بدست آورید:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst {
  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;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

پیروز وموفق باشید.

منیع : w3schools

برچسب ها