Voorbeelden van titel animaties

Titel fade

De banner heeft de animatie 'Inkomen van boven'. De titel van dit blok heeft de animatie: 'Opkomen' (fade in) De animatie vindt plaats zodra het blok in de viewport komt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et odio ac tellus auctor iaculis. Vestibulum elementum orci in faucibus iaculis. Mauris ornare eu sem vitae fringilla. Nullam venenatis, quam quis auctor ornare, sem diam eleifend massa, et sollicitudin mi turpis at nunc. Morbi fringilla neque et aliquet scelerisque. Nunc feugiat aliquet feugiat. Vivamus est quam, sodales sed posuere gravida, pellentesque ut urna. Proin dictum felis eu tempus convallis. Curabitur ac dolor ac magna cursus lacinia nec quis neque. Donec a interdum justo. Duis ultricies ornare mi id tristique. Fusce semper auctor facilisis.

Titel vanaf links

De titel van dit blok heeft de animatie: 'Inkomen vanaf links'.

Titel vanaf rechts

De titel van dit blok heeft de animatie: 'Inkomen vanaf rechts'.

Titel vanaf boven

De titel van dit blok heeft de animatie: 'Inkomen vanaf boven'.

Titel vanaf onder

De titel van dit blok heeft de animatie: 'Inkomen vanaf onder'.

Titel draaien horizontaal

De titel van dit blok heeft de animatie: 'Draaien horizontaal'.

Titel draaien horizontaal 3D

De titel van dit blok heeft de animatie: 'Draaien horizontaal 3D'.

Titel draaien vertikaal

De titel van dit blok heeft de animatie: 'Draaien vertikaal'.

Titel draaien vertikaal 3D

De titel van dit blok heeft de animatie: 'Draaien vertikaal 3D'.

Titel draaien om het midden

De titel van dit blok heeft de animatie: 'Draaien om het midden'.

Titel kantelen horizontaal

De titel van dit blok heeft de animatie: 'Kantelen horizontaal'.

Titel kantelen vertikaal

De titel van dit blok heeft de animatie: 'Kantelen vertikaal'.

Titel inzoomen

De titel van dit blok heeft de animatie: 'Inzoomen'.

Titel inzoomen horizontaal

De titel van dit blok heeft de animatie: 'Inzoomen horizontaal'.

Titel inzoomen vertikaal

De titel van dit blok heeft de animatie: 'Inzoomen vertikaal'.

Custom animatie

De titel van dit blok heeft een animatie via Custom CSS.

De class 'in-view' wordt aan de titel toegevoegd op het moment dat de sectie in de viewport komt, waardoor de animatie wordt gestart. Het blok heeft de class 'custom-title' en in de CSS staan deze instellingen:

@keyframes keyframe-custom {
  0%   {left: 0px;}
  25%  {left: 50px;}
  50%  {left: -25px;}
  75%  {left: 10px;}
  100% {left: 0px;}
}
section.custom-title h2.title.in-view {
  animation: keyframe-custom 3s ease;
  -webkit-animation: keyframe-custom 3s ease;
  z-index: 100;
}

Je kunt alles over CSS animaties vinden op W3Schools.