Utilizarea animațiilor CSS

Animațiile CSS adaugă frumusețe paginilor web și fac tranziții de la un stil CSS la celălalt frumos.

Pentru a crea o secvență de animație CSS, avem sub-proprietăți diferite în animation proprietate în CSS:

  • animation-delay
  • animation-direction
  • animation-duration
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • animation-fill-mode

Exemplu de secvență de animație CSS pentru a muta textul pe ecran

În partea HTML vom avea un div cu clasa container și a h3 cu textul Hello World:

<div class="container">
    <h3> Hello World ! </h3>
</div>

Pentru partea CSS:

.container {
    /* We will define the width, height and padding of the container */
    /* The text-align to center */
    width: 400px;
    height: 60px;
    padding: 32px;
    text-align: center;

    /* Use the animation `blink` to repeat infinitely for a time period of 2.5s*/
    animation-duration: 2.5s;           
    animation-iteration-count: infinite;
    animation-direction: normal;        
    animation-name: blink;              
    
    /* The same can be written shorthand as     */
    /* --------------------------------------   */
    /* animation: 2.5s infinite normal blink;   */
}
@keyframes blink {
    0%, 100% {              /* Defines the properties at these frames */
        background: #333;
        color: white;
    }

    50% {                   /* Defines the properties at these frames */
        background: #ccc;
        color: black;
        border-radius: 48px;
    }
}
Imgur

Mai multe informații despre animațiile CSS:

  • O introducere rapidă la animațiile CSS