Dit is een blok met 3 kolommen

De hier gebruikte animatie toont eerst de afbeelding in grijstinten en laat de kleur langzaam opkomen. Het is een custom animatie die aangemaakt is in website / animaties. De code vind je in kolom 3.

.custom-blur.in-view {
  animation: keyframe-custom-blur 3s ease infinite;
}

@keyframes keyframe-custom-blur {
  0%   {filter: grayscale(100%);}
  50% {filter: grayscale(0%);}
  100%   {filter: grayscale(100%);}
}

de CSS begint met .custom-blur.in-view De class custom-blur is de class die meegegeven wordt met de image. Daarna zie je de class .inView. Deze class zorgt er voor dat de animatie uitgevoerd wordt zodra de afbeelding in beeld komt. In dit voorbeeld staat de animatie op 'infinite' wat uitsluitend gedaan is om het voorbeeld te verduidelijken. In de praktijk zal je de animatie slechts 1x uit willen laten voeren en kan je het woordje 'infinite' weg laten.