Covers

Animatie met CSS

CD covers

Een oefening om te animeren met CSS.
Beweging kan met de transition-eigenschap, maar je krijgt meer controle met @keyframes.

Leerdoelen

CSS animatie: de opdracht(00:00:53)

In deze tutorial zie je hoe een CSS-animatie wordt ingezet. Er zijn CD-covers, die bij een rol-over hun informatie laten zien.
Het hele effect heeft geen JavaScript nodig.

CSS animatie 1: de mark-up(00:10:49)

Voor een effectieve CSS-animatie is een kloppende mark-up vereist.
Elk van de covers zit ingepakt in een div. Elk van die div's heeft dezelfde class-naam.
Binnen deze div komt eerst de afbeelding van de cover en daarnaast een article-element, die de tekstuele inhoud bevat zoals, kopjes, paragrafen en opsommingslijsten.

CSS animatie 2: stijlen toevoegen (00:18:32)

Elke cover heeft een eigen div. Deze wordt net zo breed gemaakt als de afbeelding van de cover.
Om de div's naast elkaar te plaatsen, geven we ze een float: left mee. Ook enige marge is wel prettig om de covers uit elkaar te plaatsen. (er zijn natuurlijk ook andere oplossingen te bedenken om de elementen naast elkaar te plaatsen). De floatende elementen zitten elkaar nog een beetje in de weg ten gevolge van hun onderlinge verschillende hoogten. Dat is hier eenvoudig op te lossen omdat het article toch verborgen moet worden! We geven de div's een hoogte precies gelijk aan de afbeeldingen. We zien dan direct dat het flaoten beter uitpakt. De overbodige informatie treedt echter wel buiten de beperkte ruimte.

Ook dat is direct op te lossen door de div's een overflow: hidden mee te geven. Je ziet dan alleen de afbeeldingen.
We gaan nu proberen de inhoud een beetje over de afbeelding naar boven te 'trekken'. Eerst geven we zowel de div als het article een position: relative. Daarna geven we het article een fikse negatief bovenmarge. Als je ook de achtergrond deels transparant maakt, zie je de tekst over de afbeeldingen komen. We proberen uit hoeveel negatieve marge er nodig is om de afbeelding helemaal te bedekken.

We maken de bovenmarge weer 0 en geven deze gevonden waarde juist aan de article in de div waar de muis boven komt. Daarvoor is de selector :hover nodig. Zonder de classnaam is dit iets als div:hover article.
Wil je dit in dan in een overgang zien, dan geef je aan de oorspronkelijke div article de transition eigenschap mee met de eigenschap margin-top en de tijdsduur.

CSS animatie: de stuiter (00:13:55)

De transition is wat beperkt. Een stuiter is ook mogelijk. Eerst zijn de waarden van de beweging in de tijd bestudeerd. De transition-eigenschap wordt verwijderd.
De hover-state geef je dan een animation-eigenschap met als waarde een identifier. Hier is dat 'naar-boven'. Ook de tijdsduur stel je daar in en de waarde waarde voor de fill-mode: forwards. Daarmee geef je aan de dat eindpositie van de animatie na afloop bewaard moet blijven.
Vervolgens de identifier bouwen met de @-keyframes opdracht. In deze identifier geef je bij elk percentage van de animatie an wat de eigenschappen moeten zijn. Dat kan met heel veel tussenstapjes. Een stuiter bereikt in korte tijd de eindwaarde maar keert telkens met kleinere hoeveelheden weer een beetje terug om uiteindelijk de eindwaarde te bereiken.

Inleveren