CSS Animaatiot

CSS-animaatioilla voit luoda dynaamisia ja interaktiivisia efektejä verkkosivuillesi. CSS-animaatioita käytetään yleensä korostamaan tiettyjä elementtejä sivulla tai houkuttelemaan käyttäjän huomiota tärkeisiin toimintoihin.

CSS-animaatioiden luomiseen käytetään keyframes-sääntöä, joka määrittää animaation eri vaiheet. Keyframes-säännössä voit määrittää eri ominaisuuksien arvoja tietyn ajan kuluessa, jolloin elementin ominaisuudet muuttuvat animaation edetessä.

Animaation käynnistämiseen käytetään animation-sääntöä, joka määrittää animaation keston, toiston määrän ja muita parametreja. Voit myös määrittää animaation nopeuden, viiveen ja muita ominaisuuksia animation-säännössä.

CSS-animaatioiden avulla voit luoda monenlaisia efektejä, kuten liikkuvia elementtejä, värimuutoksia, katoamisia ja ilmestymisiä. Animaatioiden käyttöä on kuitenkin tärkeä harkita suunnitellessasi sivua, sillä liiallinen animaatio voi hidastaa sivun latautumista ja häiritä käyttäjän kokemusta.

CSS-animaatiot ovat tehokas keino parantaa sivuston visuaalista ulkoasua ja tehdä siitä dynaamisemman ja interaktiivisemman. Animaatioiden avulla voit erottua muista sivustoista ja tehdä sivustostasi mielenkiintoisemman käyttäjille.

Esimerkki

Tässä on esimerkki CSS-animoinnista, jossa on kaksi animoitavaa elementtiä: ensimmäinen pyörii jatkuvasti ja toinen liikkuu kaarisesti. Voit muuttaa animaatioiden kestoa, toistokertoja ja muita ominaisuuksia muokkaamalla CSS-sääntöjä. Kommentit koodissa selventävät sen toimintaa.

.kuutio {
      width: 50px;
      height: 50px;
      background-color: #4285f4;
      position: relative;
      animation-name: pyoriminen;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }

    @keyframes pyoriminen {
      0% {
        transform: rotate(0);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .kaariliike {
      width: 50px;
      height: 50px;
      background-color: #db4437;
      position: relative;
      animation-name: kaariliikkeet;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }

    @keyframes kaariliikkeet {
      0% {
        left: 0;
        top: 0;
      }

      25% {
        left: 100px;
        top: 0;
      }

      50% {
        left: 100px;
        top: 100px;
      }

      75% {
        left: 0;
        top: 100px;
      }

      100% {
        left: 0;
        top: 0;
      }
    }

Harjoittele