CSS

CSS animacionet

5 months ago
codemolecules

@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 dhe animation-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ë si backwards dhe forwards.

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

https://codepen.io/tahir-hoxha/pen/eYdaXZz

Related Posts

CSS HTML

HTML/CSS color names

5 months ago
codemolecules
CSS

CSS transformimet

5 months ago
codemolecules