6.1 @keyframes qaydası
CSS animasiyaları minimal səylərlə mürəkkəb və hamar vizual effektlər yaratmağa imkan verir. CSS-də animasiya yaratmaq üçün əsas alət @keyframes qaydasıdır, bu qayda animasiyanın əsas kadrlərini və hər bir kadrda baş verən stil dəyişikliklərini müəyyən edir.
@keyframes qaydası CSS xüsusiyyətlərinin dəyişikliklərini animasiyanın müxtəlif mərhələlərində müəyyən edərək animasiya yaratmaq üçün istifadə olunur. Əsas kadrlər animasiya prosesində müəyyən məqamlarda tətbiq olunacaq stilləri müəyyən edir.
Sintaksis 1:
@keyframes animation-name {
from {
/* başlanğıc stillər */
}
to {
/* son stillər */
}
}
Sintaksis 2:
@keyframes animation-name {
0% {
/* başlanğıc stillər */
}
100% {
/* son stillər */
}
}
Burada:
fromanimasiya vaxtının0%-ə uyğun gəlirtoanimasiya vaxtının100%-ə uyğun gəlir
Nümunə: Fon rənginin hamar dəyişməsi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sadə animasiya nümunəsi</title>
<style>
@keyframes changeColor {
from {
background-color: lightblue;
}
to {
background-color: lightcoral;
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: changeColor 3s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Məni hover elə!</div>
</body>
</html>
İzah:
@keyframes changeColorqaydası elementin fon rənginilightbluerəngindənlightcoralrənginə dəyişən animasiyanı təyin edir.animated-boxelementindəkianimationxüsusiyyəti göstərir ki,changeColoranimasiyası 3 saniyə çəkməlidir və sonsuz təkrarlanmalıdır
6.2 Bir neçə əsas kadr
Daha mürəkkəb animasiyalar yaratmaq üçün aralıq vəziyyətlər üçün stillər müəyyənləşdirərək iki əsas kadrdan çox istifadə edə bilərsiniz.
Nümunə: Rəng dəyişməklə diaqonal hərəkət
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Keyframes Example</title>
<style>
@keyframes moveAndChangeColor {
0% {
background-color: lightblue;
transform: translate(0, 0);
}
50% {
background-color: lightgreen;
transform: translate(100px, 100px);
}
100% {
background-color: lightcoral;
transform: translate(200px, 0);
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: moveAndChangeColor 5s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Mənim hərəkətimi izləyin!</div>
</body>
</html>
İzah:
@keyframes moveAndChangeColor qaydası elementin fon rəngini və mövqeyini üç mərhələdə dəyişən animasiyanı müəyyən edir.
- Animasiyanın 0%-ində element açıq mavi rəngdədir və başlanğıc mövqeyindədir
- Animasiyanın 50%-ində element açıq yaşıl rəngdə olur və 100 piksel sağa və aşağı hərəkət edir
- Animasiyanın 100%-ində element açıq qırmızı-korallı rəngdədir və 200 piksel sağa hərəkət edir
6.3 Sadə animasiya nümunələri
Nümunə 1: Nəbz effekti
Elementin yavaş-yavaş böyüyüb kiçildiyi nəbz effektini yaratmaq.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulsing Effect</title>
<style>
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.pulse-box {
width: 150px;
height: 150px;
background-color: lightpink;
animation: pulse 2s infinite;
}
</style>
</head>
<body>
<div class="pulse-box">Pulsing</div>
</body>
</html>
İzah:
@keyframes pulseqaydası elementi 120%-ə qədər böyüdən və sonra ilkin ölçüyə qaytaran bir animasiyanı müəyyən edir.pulse-boxelementindəkianimationparametri göstərir ki,pulseadlı animasiya 2 saniyə davam etməli və sonsuz təkrarlanmalıdır
Nümunə 2: Fırlanma
Elementin fasiləsiz fırlanma effektini yaratmaq:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Effect</title>
<style>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-box {
width: 100px;
height: 100px;
background-color: lightseagreen;
animation: rotate 3s infinite linear;
}
</style>
</head>
<body>
<div class="rotate-box">Rotating</div>
</body>
</html>
İzah:
@keyframes rotateqaydası elementi 0-dan 360 dərəcəyə qədər fırladan animasiyanı müəyyən edir-
.rotate-boxelementindəkianimationparametri göstərir ki,rotateanimasiyası 3 saniyə davam etməli, sonsuz təkrarlanmalı və sabit sürətlə (linear) baş verməlidir
GO TO FULL VERSION