CSS3: Elementen vloeiend aanpassen
Met CSS3 kan je ervoor zorgen dat je websites er modern en professioneel uitzien, zoals eerder uitgelegd in artikelen over gradients in achtergronden en schaduwen op elementen en tekst in je website. Een andere functie om de gebruikservaring van je bezoeker op de website te verbeteren zijn overgangen (transitions). Transitions zorgen ervoor dat de overgangen tussen een verandering van een bepaald eigenschap van een element (bijvoorbeeld de hoogte) vloeiend loopt.
Transitions
Transitions zijn van toepassing op een aantal, zoals lettergrootte, positie, rand, hoogte en veel meer. Zie voor een lijst met eigenschappen waar een overgang op toegepast kan worden CSS animated properties.
Een transition hoort bij een CSS-verklaring en heeft dus betrekking op één of meer elementen. Je geeft bij een transition op welke eigenschap het betreft (hoogte, breedte, etc., of alle), hoe lang de overgang duurt, welke functie (zie hieronder voor een korte uitleg) gebruikt moet worden en wat de wachttijd is. Niet alle eigenschappen zijn verplicht.
In onderstaand voorbeeld wordt de padding van een article aangepast als de muis eroverheen gaat:
HTML:
<!doctype html>
<head>
<title>Mijn site</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<article>
<header>
<h1>Koptekst</h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisl mauris, rhoncus nec egestas et, rhoncus et nunc. Nullam semper iaculis tempus. Praesent dapibus purus sit amet dolor aliquam rutrum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas est ante, efficitur id ipsum eget, euismod auctor magna. Suspendisse et rutrum diam. Etiam gravida ligula euismod massa pharetra, non viverra lectus volutpat. Fusce non felis cursus, imperdiet ipsum luctus, vehicula leo. Etiam dictum neque sapien, ut rhoncus arcu condimentum eget. Sed felis nunc, vehicula at nunc a, tincidunt ultricies metus. Suspendisse sit amet blandit quam. Praesent metus lacus, pharetra in nisi eget, faucibus convallis lectus. Fusce tristique est augue, quis vulputate eros dictum sed. Sed a lacus in eros aliquet aliquet eu sed lorem.
</p>
</article>
</body>
CSS:
article{
padding: 20px;
margin: 20px;
}
article:hover{
padding: 10px;
}
Als je nu met je muis over de article gaat, dan wordt de padding minder. Dit gebeurt echter direct, zonder overgang. Het zou mooier zijn een overgang hier te gebruiken. Dat doe je via de volgende code:
article{
padding: 20px;
margin: 20px;
transition: padding 1s;
}
article:hover{
padding: 10px;
}
Nu duurt het één seconde voordat de padding 10px is en de padding wordt geleidelijk minder. Je kan ook meerdere eigenschappen aanpassen:
article{
padding: 20px;
margin: 20px;
width: 100%;
transition: padding 1s, width 10s;
}
article:hover{
padding: 10px;
width: 50%;
}
In plaats van alle eigenschappen benoemen, kan je ook het woordje all gebruiken:
article{
padding: 20px;
margin: 20px;
width: 100%;
transition: all 2s;
}
article:hover{
padding: 10px;
width: 50%;
}
Functies
Een overgang wordt uitgevoerd via een zogenaamde functie. De functie bepaalt hoe de overgang verloopt. Het kan geleidelijk oftewel lineair gaan, maar het kan ook langzaam beginnen, dan snel gaan en weer langzaam eindigen. Zie transition-timing-function voor een lijst met functies. De standaard-functie is cubic-bezier.
Een functie geef je op per eigenschap:
article{
padding: 20px;
margin: 20px;
width: 100%;
transition: all 2s linear;
}
Wachttijd
Door een wachttijd mee te geven, kan je aangeven dat de browser een bepaalde tijd moet wachten voordat de overgang toegepast wordt. Als je niet wilt dat bepaalde icoontjes meteen oplichten of elementen groter worden zodra je er met je muis overheen gaat, dan kan je deze waarde aanpassen:
article{
padding: 20px;
margin: 20px;
width: 100%;
transition: all 1s linear 1s;
}
Met overgangen zorg je ervoor dat je website er professioneler uitziet en voor bezoekers oogt de site beter. Een mooie site zal voor meer terugkerende bezoekers zorgen en conversieverhogend werken.
