Online CSS animatie

Animatie rechtstreeks vanuit de browser

programming • animatie • design

Het is geen wonder dat je op mijn plezier-pagina zo veel animaties tegenkomt. Ik beleef er enorme plezier aan om grafische elementen te laten bewegen. Meestal gebruik ik hiervoor animatie software zoals Adobe After effects, maar vandaag experimenteer ik met iets heel anders: animatie direct in de browser met behulp van CSS.

In het voorbeeld hiernaast gebruik ik de transform.scale functie in combinatie met de opacity om het gewenste effect te creëren. Door verschillende div objecten over elkaar heen te plaatsen maak ik een soort animatie die eindeloos blijf herhalen.

@keyframe voor de timing

In de animatie hiernaast maak ik gebruik van de transform.rotate functie in combinatie met een op en neer beweging van de C en de S. De C en de S bewegen van boven naar beneden terwijl het div element waar ze in staan 360 graden draait. Met de @keyframe functie kunnen we de animatie timen.

CSS code voor de achtergrond en de C en de S

@keyframes background {
  0%   {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

@keyframes c en s {
  0%   {top: 0%;}
  50%  {top: 50%;}
  100% {top: 0%;}
}

Rotatie in combinatie met scale

Door verschillende functies met elkaar te combineren kun je behoorlijk complexe animaties maken, die allemaal rechtstreeks vanuit de webbrowser kunnen worden afgespeeld. In dit voorbeeld combineer ik de transform.rotate en de scale functies om een soort loading effect na te bootsen.

CSS code voor de achtergrond en de E en de K

@keyframes background {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

@keyframes e en k {
  0% {transform: scaleX(1.0);}
  50% {transform: scaleX(3.5);}
  100% {transform: scaleX(1.0);}
}

Bekijk één van mijn andere projecten

Volgende project