Animaties op je site met CSS3

Geschreven door: op maandag 31 augustus 2015

Leestijd:

animaties-op-je-site-met-css3.jpg

Om het gebruik van je site aantrekkelijker te maken of om bepaalde onderdelen bij je bezoekers onder de aandacht te brengen, kan je gebruikmaken van animations in CSS3. Met deze mogelijkheid van CSS zorg je ervoor dat elementen op je pagina kunnen bewegen.

Waarom animaties?

  1. De gebruikservaring van een bezoek verbeteren: met animaties kan je bepaalde handelingen, net als met transitions, vloeiend laten verlopen. Een succesvolle site is een aantrekkelijke site.
  2. Onderdelen van je website of webshop onder de aandacht van de bezoeker brengen: Bij bepaalde gebeurtenissen (bijvoorbeeld een nieuw bericht of een voorraadupdate) wil je dat dit duidelijk is voor de bezoeker. Door alleen de opmaak te wijzigen, zorg je daar voor, door samen met animatie, valt het meer op.
  3. Er zijn andere technieken om elementen te animeren (bijvoorbeeld Javascript of afbeeldingen), maar CSS3 is hiervoor geoptimaliseerd, zodat de overgangen soepel verlopen.

Animaties toepassen

Een animatie voeg je toe aan een element door keyframes te definiëren en deze te koppelen aan het element in de stylesheet. De animatie zal meteen starten als deze is toegewezen. Zie onderstaand voorbeeld:

HTML:

<div class="toolbar">
    <ul>
        <li><i class="fa fa-home"></i></li>
    </ul>
</div>
 

CSS:

li{
            list-style: none;
            margin: 0;
            padding: 0;
            font-size: 24px;
}
 
.fa-home{
    padding: 20px;
    border: 1px solid #000;
    border-radius: 24px;
}
 
.fa-home{
    animation-name: popout;
            animation-duration: 0.4s;
            animation-direction: alternate;
            animation-iteration-count: infinite;
}
 
@keyframes popout{
            from{
                        font-size: 100%;
            }
           
           
            to{
                        font-size: 200%;
            }
}
 

Bekijk de code op JSFiddle om het voorbeeld realtime te zien.

In dit voorbeeld wordt gebruik gemaakt van een Home-icoon van FontAwesome om knop te maken die bij een bepaalde actie van de gebruiker geanimeerd wordt. Nu is deze animatie nog oneindig en wordt deze onmiddellijk gestart.

De animatie wordt gekoppeld aan elementen met class name .fa-home via de opmaakregel animation-name. Onderaan de stylesheet wordt een keyframe gedefinieerd met dezelfde naam. Een keyframe bestaat uit regels die aangeven, via percentages, wanneer gedurende een animatie een opmaakregel moet zijn toegepast op een element. 0% is het begin van de animatie, 100% het einde; deze twee waardes zijn ook toe te passen via de woorden from en to.

De duur van een animatie bepaal je met de regel animation-duration en geef je aan in seconden. In het voorbeeld staat de keyframeregel 100% gelijk aan 0.4 seconden.

Een animatie zal één keer uitgevoerd worden, maar dat kan worden aangepast met de regel animation-iteration-count, waarvan de waarde een cijfer kan zijn, maar ook infinite, waarmee de animatie oneindig doorgaat.

Een animatie zal normaal gesproken eindigen bij 100% en daarna in een keer de stijlregels voordat de animatie begon, toepassen. Met animation-direction: alternate geef je aan dat de volgende iteratie begint bij 100% en eindigt bij 0%. Bovenstaand voorbeeld zou ook bereikt worden door font-size:200% toe te passen bij keyframe-regel 50% en bij 100% weer terug te keren naar de aanvankelijke staat.

Events

De animaties vuren events af als ze beginnen en eindigen of als een iteratie is afgelopen en deze events kan je gebruiken in Javascript om een bepaalde handeling uit te voeren, bijvoorbeeld code uitvoeren of een CSS-klasse toe te passen:

Javascript:

$('.fa-home').bind('animationstart', function(e){
            $(this).removeClass('active');
});
 
$('.fa-home').bind('animationend', function(e){
            $(this).addClass('active');
});

CSS:

li{
list-style: none;
margin: 0;
padding: 0;
font-size: 24px;
cursor: pointer;
}
 
.fa-home{
    padding: 20px;
    border: 1px solid #000;
    border-radius: 24px;
}
 
.fa-home:hover{
    animation-name: popout;
            animation-duration: 1s;
            animation-iteration-count: 2;
}
 
@keyframes popout{
            from{
                        font-size: 100%;
            }
   
    50%{
        font-size: 200%;
     }
           
            to{
                        font-size: 100%;
            }
}
 
.active{
    box-shadow: 0 10px 2px #33ff33;
}
 

Zie het realtime-voorbeeld op JSFiddle.

Crossbrowser support

Oudere WebKit-browsers vereisen dat de CSS-prefix –webkit wordt gebruikt, oudere Firefox-versies –ms.

Zie ook


Andere blogartikelen

  • Tabellen in HTML

    Geschreven door: op maandag 30 december 2019

    Met UL, OL en LI maak je opsommingen. Met DL, DT en DD maak je lijsten van definities. Naast opsommingen en definities is er ook nog tabulaire data: gegevens die in een tabel staan, waarbij je rijen h ...

    Bekijk het artikel »
  • Tekst manipulatie in SQL met Stuff()

    Geschreven door: op maandag 30 december 2019

    In SQL heb je een aantal ingebouwde functies die erg handig kunnen zijn. Je kunt hier bijvoorbeeld denken aan Count(), welke het totaal aantal rijen teruggeeft van een query resultaat. Maar er zijn oo ...

    Bekijk het artikel »
  • SQL en het gebruik van For XML: Raw en Auto

    Geschreven door: op maandag 30 december 2019

    Een query binnen SQL geeft natuurlijk resultaten terug. Deze kun je op verschillende manieren weergeven: als tabel, als tekst of je kunt de resultaten opslaan in een bestand. Wat ook kan, is de result ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten