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


Op De Hoogte Blijven?

Online Succes realiseren is een vak, een vak wat wij verstaan en waarover we je graag vertellen. Schrijf je in voor onze maandelijkse nieuwsbrief en blijf op de hoogte van trends, thema’s en succesverhalen.

Aanhef

Andere blogartikelen

Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
Aliancys is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd gazellen 2017
Google analytics
Google adwords
TelefoonE-mail