@keyframes
Brenda @keyframes
specifikohen CSS stilet që kanë të bëjnë me animacionin që do të mundësojë ndryshimin gradual nga stili ekzistues në një stil tjetër përgjatë një periudhe të caktuar kohore.
Animacioni më pas duhet të lidhet për elementin ndaj të cilit duam ta aplikojmë atë animacion.
Në shembullin vijues, bëhet tranzicioni i ngjyrës së prapavisë së elementit <div>
, nga e verdha në të gjelbërt, brenda një intervali prej 5 sekondash.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@keyframes shembulli {
from {
background-color: yellow;
}
to {
background-color: lightseagreen;
}
}
#teksti {
animation-name: shembulli;
animation-duration: 5s;
width: 400px;
height: 200px;
padding: 4em;
background-color: lightseagreen;
}
</style>
</head>
<body>
<div id="teksti"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p></div>
</body>
</html>
https://gist.github.com/Alkimisti/2d75b10356074dd46722913d15e9a72d
https://codepen.io/tahir-hoxha/pen/MWjdyjd
Brenda from
shënojmë cilat CSS veti do të ndryshohen duke e shënuar vlerën fillestare, ndërsa në to
shënojmë vlerat e reja të atyre vetive, pra mund të jenë më shumë se një veti.
Në shembullin konkret, kemi ndryshimin nga background-color: yellow
në background-color: lightseagreen
.
‘@keywframes’ duhet ta ketë një ID, që në rastin konkret është @keyframes shembulli
, në mënyrë që më pas këtij animacioni t’i referohemi nga elementi apo elementet ku duam ta aplikojmë.
animation-name
Vetia animation-name
është referencë ndaj një animacioni, pra këtu bëhet ndërlidhja e elementit që duam ta animojmë me një animacion të caktuar.
animation-duration
Vetia animation-duration
përcakton se sa do të zgjasë animacioni. Nëse nuk specifikohet, nuk do të ndodhë animacioni.
Në shembullin vijues, animacioni i njëjtë do të aplikohet ndaj disa elementeve individuale njëkohësisht:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@keyframes shembulli {
from {
background-color: yellow;
}
to {
background-color: lightseagreen;
}
}
#teksti {
width: 400px;
height: 200px;
}
#teksti p {
animation-name: shembulli;
animation-duration: 5s;
padding: 2em;
background-color: lightseagreen;
}
</style>
</head>
<body>
<div id="teksti"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. </p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p></div>
</body>
</html>
https://gist.github.com/Alkimisti/c8f7af379bbbb60a617e11c4f34a0db2
https://codepen.io/tahir-hoxha/pen/VwKOayz
Në shembullin e tretë, i ndryshojmë dy veti njëkohësisht: background-color
dhe width
:
@keyframes shembulli {
from {
background-color: yellow;
width: 200px;
}
to {
background-color: lightseagreen;
width: 400px;
}
}
https://gist.github.com/Alkimisti/b662272a8f333971d2242a25f457a761
https://codepen.io/tahir-hoxha/pen/GRjaZbY
Animacioni i njëjtë i aplikuar ndaj dy elementeve, me kohëzgjatje të ndryshme:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@keyframes shembulli {
from {
width: 200px;
}
to {
width: 400px;
}
}
#teksti {
width: 400px;
animation-name: shembulli;
animation-duration: 3s;
background-color: lightseagreen;
}
#bird {
animation-name: shembulli;
animation-duration: 8s;
}
</style>
</head>
<body>
<p id="teksti">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
<img id="bird" src="bird.jpg" alt="">
</body>
</html>

https://gist.github.com/Alkimisti/8db94b17ad1b4d2ae2005340bfcfca50
https://codepen.io/tahir-hoxha/pen/jOMorYr
Animacioni mund të përmbajë më shumë faza të tranzicionit. Në këtë shembull janë katër tranzicione, ku ndryshohet ngjyra e prapavijës dhe e tekstit njëkohësisht. Momentet e tranzicionit janë shprehur me përqindje. Meqenëse si kohëzgjatje e animacionit është caktuar 12s dhe tranzicionet janë në 0%, 25%, 50% dhe 100%, atëherë tranzicionet do të ndodhin në çdo 3 sekonda.
@keyframes shembulli {
0% {
background-color: red;
color: yellow;
}
25% {
background-color: yellow;
color: blue;
}
50% {
background-color: blue;
color: yellow;
}
100% {
background-color: green;
color: white;
}
}
#teksti {
width: 400px;
height: 250px;
background-color: green;
padding: 2em;
color: white;
animation-name: shembulli;
animation-duration: 12s;
}
https://gist.github.com/Alkimisti/e1fcb215dabff58d5728e26ff0ca44b3
https://codepen.io/tahir-hoxha/pen/yLaWaav
Në këtë shembull bëjmë tranzicionin e ngjyrës dhe pozitës së elementit <div>
.
@keyframes shembulli {
0% {
background-color: lightyellow;
left: 0;
top: 0;
}
25% {
background-color: yellow;
left: 300px;
top: 0;
}
50% {
background-color: orange;
left: 300px;
top: 300px;
}
75% {
background-color: darkorange;
left: 0;
top: 300px;
}
100% {
background-color: lightyellow;
left: 0;
top: 0;
}
}
#teksti {
width: 300px;
height: 100px;
background-color: lightyellow;
padding: 2em;
position: relative;
animation-name: shembulli;
animation-duration: 4s;
}
https://gist.github.com/Alkimisti/e0cee66f1afcbcea4b17dcd7d2475b41
https://codepen.io/tahir-hoxha/pen/qBaGaoW
animation-delay
Vetia animation-delay
bën vonim të fillimit të animacionit për një periudhë të caktuar kohore.
#teksti {
width: 300px;
height: 100px;
background-color: lightyellow;
padding: 2em;
position: relative;
animation-name: shembulli;
animation-duration: 4s;
animation-delay: 2s;
}
https://gist.github.com/Alkimisti/a1e72b609dddad7d5bc0f1db72312d27
https://codepen.io/tahir-hoxha/pen/rNMgMPb
Në përdorim vlera negative, animacioni do të fillojë sikur të kishte filluar n
sekonda më parë.
#teksti {
width: 300px;
height: 100px;
background-color: lightyellow;
padding: 2em;
position: relative;
animation-name: shembulli;
animation-duration: 4s;
animation-delay: -2s;
}
https://gist.github.com/Alkimisti/026c430c1b4d6f4587f9ea8c19e9bf36
https://codepen.io/tahir-hoxha/pen/bGwyBBj
animation-iteration-count
Me vetinë animation-iteration-count
përcaktohet sa herë duhet të ekzekutohet animacioni.
#teksti {
width: 300px;
height: 100px;
background-color: lightyellow;
padding: 2em;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
https://gist.github.com/Alkimisti/dbdd3cae81db806379751142c5a04bd3
https://codepen.io/tahir-hoxha/pen/QWKRGgY
Me animation-iteration-count: infinite;
animacioni do të përsëritet pandërprerë.
animation-direction
Vetia animation-direction
cakton nëse animacioni do të ekzekutohet duke shkuar përpara, prapa, apo në cikle alternative.
Vlerat e mundshme:
normal
– Animacioni ekzekutohet normalisht.reverse
– Animacioni ekzekutohet mbrapsht.alternate
– Animacioni njëherë shkon përpara, pastaj prapa.alternate-reverse
– Animacioni njëherë shkon prapa, pastaj përpara.
#teksti {
width: 300px;
height: 100px;
background-color: lightyellow;
padding: 2em;
position: relative;
animation-name: shembulli;
animation-duration: 4s;
animation-direction: reverse;
}
https://gist.github.com/Alkimisti/c406f22d740e5114ada9784335f36f7c
https://codepen.io/tahir-hoxha/pen/vYXwgyV
#teksti {
width: 300px;
height: 100px;
background-color: lightyellow;
padding: 2em;
position: relative;
animation-name: shembulli;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
https://gist.github.com/Alkimisti/745fbfb3eb2d801b0e715c1966d1fa6a
https://codepen.io/tahir-hoxha/pen/LYRoqoL
animation-timing-function
Vetia animation-timing-function
specifikon lakoren e shpejtësisë së animacionit.
ease
– Animacioni do të fillojë i ngadalshëm, pastaj përshpejtohet, në fund ngadalësohet.linear
– Shpejtësia është konstante.ease-in
– Animacioni ka fillim të ngadalshëm.ease-out
– Animacioni ka fund të ngadalshëm.ease-in-out
– Animacioni ka fillim dhe fund të ngadalshëm.cubic-bezier(n,n,n,n)
– Mund të definojmë vlera sipas lakores së Bezierit.
https://gist.github.com/Alkimisti/8103d321decffb324c30548dfa68390f
https://codepen.io/tahir-hoxha/pen/qBaGXWL
animation-fill-mode
Normalisht, animacionet nuk ndikojnë në CSS karakteristikat e elementit që i nënshtrohet animacionit, para fillimit dhe pas përfundimit të animacionit. Pra, elementi kthehet në gjendjen paraprake të vetive të cilat janë afektuar nga animacioni.
Me vetinë animation-fill-mode
caktojmë stilin e elementit kur animacioni nuk është duke u ekzekutuar (para animacionit, pas animacionit ose para dhe pas animacionit) .
none
– Vlera standarde. Animacioni nuk do të aplikojë asnjë stil ndaj elementit, para apo pas animacionit.forwards
– Elementi do t’i ruajë vlerat nga keyframe i fundit. Kjo varet nga vetitëanimation-direction
dheanimation-iteration-count
.backwards
– Elementi do t’i marrë vlerat nga keyframe i parë. Kjo varet nga vetitëanimation-direction
dhe do ta mbajë gjatë periudhës sëanimation-delay
.both
– Animacioni do të veprojë sibackwards
dheforwards
.
https://gist.github.com/Alkimisti/fa553e28200ef3ea5d691d4f2b24b222
https://codepen.io/tahir-hoxha/pen/MWjdvQB
animation
Shkurtesë për shënimin e vetive të animacionit në një rresht.
#teksti1 {
animation: shembulli1 3s infinite forwards alternate ease-in-out;
}
animation-play-state
Definon nëse animacioni duhet të startohet apo të pauzojë. Gjendja mund të ndryshohet me JavaScript.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>animation-play-state</title>
<style>
@keyframes levizja {
from {
left: 0;
}
to {
left: 400px;
}
}
#teksti {
background-color: yellow;
padding: 20px;
margin-top: 20px;
width: 400px;
height: 40px;
position: relative;
animation: levizja 5s infinite alternate;
animation-play-state: paused;
}
</style>
</head>
<body>
<button id="play">Play</button>
<button id="pause">Pause</button>
<div id="teksti">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate voluptates officiis quis quos
ipsa quisquam.
</div>
<script>
document.querySelector("#play").addEventListener('click', (event) => {
document.querySelector("#teksti").style.animationPlayState = "running";
})
document.querySelector("#pause").addEventListener('click', (event) => {
document.querySelector("#teksti").style.animationPlayState = "paused";
})
</script>
</body>
</html>
https://gist.github.com/Alkimisti/3162626f01c5b3c186daf4ae65b49132