انیمیشن های CSS

انیمیشن های CSS به انتقال عناصر از یک سبک به سبک دیگر اشاره دارد. آنها از ویژگی هایی تشکیل شده اند که نحوه کار انیمیشن ها و فریم های کلیدی را نشان می دهد.

ایجاد انیمیشن های CSS

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

در اینجا نحوی وجود دارد که می توانید برای متحرک سازی یک عنصر با CSS استفاده کنید:

/* For modern browsers */  
@-webkit-keyframes my-move {
   from {background-color: green;}
   to {background-color: lightblue;}
}
/* The standard way */
@keyframes my-move {
   from {background-color: green;}
   to {background-color: lightblue;}
}

اطلاعات بیشتر در مورد فریم های کلیدی

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

در این مثال ، ما یک انیمیشن را به <div> متصل می کنیم. ما انیمیشن را به مدت 6 ثانیه تنظیم می کنیم و رنگ پس زمینه <div> را از آبی به سبز تغییر می دهیم:

/* Code for the animation */
@keyframes learn {
    from {background-color: blue;}
    to {background-color: green;}
}

/* The div element for the animation */
div {
     width: 150px;
    height: 150px;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    border-radius: 90px;
}

به یاد داشته باشید: از آنجا که مقدار پیش فرض مدت زمان انیمیشن 0 ثانیه است ، اگر ویژگی مدت زمان انیمیشن تعریف نشود ، انیمیشن تأثیر نخواهد داشت.

همچنین می توانید از مقادیر درصد برای تنظیم تغییرات تدریجی سبک استفاده کنید. بنابراین ، سبک هر مرحله از انیمیشن را کنترل می کنید.

در مثال زیر ، پس از اتمام 30٪ از انیمیشن ، رنگ پس زمینه تغییر می کند. سپس ، با تکمیل 60٪ به رنگ دیگری تغییر می کند و با پایان انیمیشن به رنگ نهایی خود می رسد (100٪).

/* Code to animate */
@keyframes learn {
    0%   {background-color: blue;}
    30%  {background-color: red;}
    60%  {background-color: purple;}
    100% {background-color: pink;}
}

/* The div element */
div {
    width: 150px;
    height: 150px;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    border-radius: 90px;
}

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

/* The code to animate */
@keyframes learn {
    0%   {background-color: blue; left: 1px; top: 1px;}
    30%  {background-color: green; left: 300px; top: 1px;}
    60%  {background-color: red; left: 300px; top: 300px;}
    100% {background-color: purple; left: 1px; top: 1px;}
}

/* The div element */
div {
    width: 150px;
    height: 150px;
    position: relative;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    border-radius: 90px;
}

چند انیمیشن

با جدا کردن هر انیمیشن با ویرگول می توانید چندین انیمیشن CSS را اعلام کنید.

.example {
  height: 200px;
  width: 200px;
  background-color: salmon;
  animation: 
    learn 6s ease infinite alternate, 
    nudge 5s linear infinite alternate;
}

محو شدن

یکی از مثال های انیمیشن CSS تنظیم جلوه محو برای عناصر است.

با استفاده از قانونkeyframes می توانید انیمیشن fade-in CSS را برای تعیین شفافیت از 0 به 1 ایجاد کنید.

/* Code for the animation */
@keyframes learn {
 from {opacity: 0;}
 to {opacity: 1;}
}

/* The div element for the animation */
div {
 width: 150px;
 height: 150px;
 background-color: salmon;
 animation-name: learn;
 animation-duration: 6s;
 border-radius: 90px;
}

توجه: مقدار ویژگی opacity می تواند از 0.0 تا 1.0 باشد. هرچه مقدار کمتر باشد ، عنصر شفاف تر است.

انیمیشن چرخشی

با دستکاری در اثر چرخش می توانید انیمیشن چرخشی CSS را ایجاد کنید. مثال زیر یک انیمیشن چرخشی CSS را برای یک تصویر تنظیم می کند:

.image {
   position: absolute;
    -webkit-animation: spin 6s linear infinite;
    -moz-animation: spin 6s linear infinite;
    animation: spin 6s linear infinite;
}

انیمیشن-تاخیر

ویژگی CSS انیمیشن تاخیر مشخص می کند که چه مدت از شروع انیمیشن می گذرد. مقدار پیش فرض 0 است ، به این معنی که انیمیشن به محض بارگیری صفحه شروع می شود.

در این مثال ، ما انیمیشن CSS را برای چهار ثانیه به تأخیر می اندازیم:

div {
    width: 150px;
    height: 150px;
    position: relative;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    animation-delay: 4s;
    border-radius: 90px;
}

انیمیشن-تکرار-شمارش

ویژگی انیمیشن-تکرار-تعداد تعداد انیمیشن را چند بار اجرا می کند.

در این مثال ، انیمیشن پنج بار اجرا می شود:

div {
    width: 150px;
    height: 150px;
    position: relative;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    animation-iteration-count: 5;
    border-radius: 90px;
}

برای اینکه انیمیشن CSS هرگز تمام نشود ، می توانید از مقدار بی نهایت استفاده کنید:

div {
    width: 150px;
    height: 150px;
    position: relative;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    border-radius: 90px;
}

انیمیشن-کارگردانی

ویژگی CSS-animation-direction نشان می دهد که آیا یک انیمیشن به عقب ، جلو یا به طور متناوب بین عقب و جلو پخش می شود.

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

div {
    width: 150px;
    height: 150px;
    position: relative;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    animation-iteration-count: 5;
    animation-direction: reverse;
   border-radius: 90px;
}

در این مثال ، انیمیشن به جلو ، سپس به عقب اجرا می شود:

div {
    width: 150px;
    height: 150px;
    position: relative;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    animation-iteration-count: 5;
    animation-direction: alternate;
   border-radius: 90px;
}

انیمیشن شروع به عقب شدن می کند ، سپس به جلو اجرا می شود:

div {
    width: 150px;
    height: 150px;
    position: relative;
    background-color: blue;
    animation-name: learn;
    animation-duration: 6s;
    animation-iteration-count: 5;
    animation-direction: alternate-reverse; 
   border-radius: 90px;  
}

عملکرد انیمیشن – زمان بندی

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

مثال زیر CSS را با منحنی های سرعت مختلف متحرک می کند:

#div1 {animation-timing-function: ease;}
#div2 {animation-timing-function: ease-out;}
#div3 {animation-timing-function: ease-in-out;}
#div4 {animation-timing-function: ease-in;}
#div5 {animation-timing-function: linear;}

لیستی از مقادیر ممکن:

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

انیمیشن-پر کردن حالت

ویژگی CSS animation-fill-mode نحوه تأثیر انیمیشن های CSS بر سبک اهداف قبل و بعد از پایان انیمیشن را تعیین می کند.

مثال زیر نحوه کار کردن حالت انیمیشن را با مقدار فوروارد نشان می دهد. توجه داشته باشید که چگونه عنصر سبک آخرین فریم کلیدی انیمیشن را پس از اتمام حفظ می کند.

div {
    width: 150px;
    height: 150px;
    background: lightblue;
    position: relative;
    animation-name: learn;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

در اینجا مقادیر اصلی ملک آورده شده است:

Description	Value
(پیش فرض) انیمیشن بر سبک عنصر تأثیر نمی گذارد و نه قبل و نه بعد از اجرای انیمیشن	none
مقادیر سبک آخرین فریم کلیدی انیمیشن روی عنصر اعمال می شود	forwards
مقادیر سبک اولین فریم کلیدی انیمیشن به عنصر اعمال می شود و در دوره تأخیر انیمیشن نگهداری می شود	backwards
انیمیشن از قوانین حالت پر شدن انیمیشن به جلو و عقب پیروی می کند	both

مثال زیر نحوه کار کردن حالت انیمیشن را با مقدار رو به عقب نشان می دهد. می بینید که این عنصر سبک اولین فریم کلیدی را قبل از شروع انیمیشن (هنگام تأخیر) دارد.

div {
    width: 150px;
    height: 150px;
    background: blue;
    position: relative;
    animation-name: learn;
    animation-duration: 2s;
    animation-delay: 1.5s;
    animation-fill-mode: backwards;
   border-radius: 90px;
}

این مثال نحوه کار کردن حالت انیمیشن را با مقادیر عقب و جلو نشان می دهد.

div {
    width: 150px;
    height: 150px;
    background: blue;
    position: relative;
    animation-name: learn;
    animation-duration: 2s;
    animation-delay: 1.5s;
    animation-fill-mode: both;
   border-radius: 90px;
}

این عنصر سبک اولین فریم کلیدی را قبل از شروع انیمیشن دریافت می کند. پس از پایان انیمیشن ، عنصر سبک آخرین فریم کلیدی را حفظ می کند.

خلاصه نویسی متحرک

انیمیشن CSS مختصر کلیه خصوصیات longhand را در یک اعلان اعلام می کند.

این مثال استفاده از شش دست بلند انیمیشن را نشان می دهد:

div {
    animation-name: learn;
    animation-duration: 6s;
    animation-timing-function: ease;
    animation-delay: 3s;
    animation-iteration-count: 5;
    animation-direction: reverse;
    border-radius: 90px;
}

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

div {
    animation: learn 6s ease 3s 5 reverse;
}

همه خواص مختصر انیمیشن های CSS

Description	Property
شروع انیمیشن را با تأخیر یا بدون تأخیر مشخص می کند	animation-delay
جهت انیمیشن را مشخص می کند	animation-direction
مشخص می کند که یک چرخه چه مدت طول می کشد	animation-duration
سبک عناصر را قبل و بعد از اجرای انیمیشن تعریف می کند	animation-fill-mode
مشخص می کند که یک انیمیشن چند بار اجرا شود	animation-iteration-count
نام انیمیشنkeyframes را تعریف می کند	animation-name
حالت انیمیشن را مشخص می کند – مکث / در حال اجرا	animation-play-state
منحنی سرعت انیمیشن را تعریف می کند	animation-timing-function

لیستی از ویژگی های متحرک

این ویژگی هایی است که با استفاده از CSS قابل انیمیشن است:

Property
background
background-position
background-size
background-color
border (and its related properties)
box-shadow
bottom
color
clip
column-gap
column-count
column-width
column-rule-width
column-rule-color
column-rule
columns
filter
flex
flex-grow
flex-shrink
flex-basis
font
font-size-adjust
font-size
font-weight
font-stretch
height
letter-spacing
line-height
left
margin
margin-left
margin-bottom
margin-top
margin-right
max-width
max-height
min-width
min-height
order
opacity
outline
outline-offset
outline-width
outline-color
padding
padding-top
padding-right
padding-left
padding-bottom
perspective
perspective-origin
right
text-shadow
text-decoration-color
text-indent
transform-origin
transform
top
visibility
vertical-align
word-spacing
width
z-index

نکات مهم انیمیشن CSS:

• شما باید CSS را با احتیاط تحریک کنید زیرا رنگ های چشمک زن ، و انواع خاصی از حرکت می تواند مشکلاتی را برای افراد مبتلا به اختلالات ، میگرن یا صرع ایجاد کند.
• برای اطمینان از اینکه انیمیشن های CSS در همه مرورگرها کار می کنند ، می توانید پیشوندهایی مانند -webkit-animation و -moz-animation را در آن قرار دهید.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.