Animaties instellen

Animaties kunnen ingesteld worden voor de hele website, of specifiek voor een bepaalde afbeelding.

Je kunt kiezen voor standaard animaties of zelf een animatie aanmaken in het scherm Animaties. De animaties zijn volledig CSS. Je kunt onderstaande code voorbeelden gebruiken om je eigen animaties aan te maken.

Informatie over het maken van animaties kun je vinden op W3Schools.

Scale

@keyframes keyframe-scale {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

Fade

@keyframes keyframe-fade-in {
  from {opacity: 0;}
  to {opacity: 1;}
}

Draai links 45

@keyframes keyframe-turn-45-left {
  from {transform: rotate(45deg);}
  to {transform: rotate(0deg);}
}

Draai rechts 45

@keyframes keyframe-turn-45-right {
  from {transform: rotate(-45deg);}
  to {transform: rotate(0deg);}
}

Draai links en scale

@keyframes keyframe-turn-45-left-grow {
  from {transform: rotate(45deg) scale(0);}
  to {transform: rotate(0deg) scale(1);;}
}

Draai rechts en scale

@keyframes keyframe-turn-45-right-grow {
  from {transform: rotate(-45deg) scale(0);}
  to {transform: rotate(0deg) scale(1);}
}

Schudden

@keyframes keyframe-shakeX {
  from, to { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); }
}

Elastiek

@keyframes keyframe-elastic {
  from { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  to { transform: scale3d(1, 1, 1); }
}

Bounce

@keyframes keyframe-bounce {
  from, 20%, 50%, to {
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
    transform: translate3d(0, 0, 0);
  }

  40% {
    animation-timing-function: cubic-bezier(0.8, 0.1, 0.9, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    animation-timing-function: cubic-bezier(0.8, 0.1, 0.9, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.06);
  }

  80% {
    transition-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
    transform: translate3d(0, 0, 0) scaleY(0.94);
  }

  90% {
    transform: translate3d(0, -3px, 0) scaleY(1.03);
  }
}

Bounce en skew

@keyframes keyframe-bounce-skew {
  from, 20%, 50%, to {
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
    transform: translate3d(0, 0, 0);
  }

  40% {
    animation-timing-function: cubic-bezier(0.8, 0.1, 0.9, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1) skewY(7deg);
  }

  70% {
    animation-timing-function: cubic-bezier(0.8, 0.1, 0.9, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.06) skewY(-5deg);
  }

  80% {
    transition-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
    transform: translate3d(0, 0, 0) scaleY(0.94) skewY(3deg);
  }

  90% {
    transform: translate3d(0, -3px, 0) scaleY(1.03) skewY(-1deg);
  }
}

Van rond naar vierkant

@keyframes keyframe-from-round {
  from { border-radius: 50%; }
  to { border-radius: 0%; }
}

Van vierkant naar rond

@keyframes keyframe-from-square {
  from { border-radius: 0%; }
  to { border-radius: 50%; }
}

In de CSS hebben we er bovendien voor gezorgd dat deze afbeelding rond wordt weergegeven.

Van rond naar vierkant en draaien

@keyframes keyframe-from-round-turn {
  from { border-radius: 50%; transform: rotate(90deg); }
  to { border-radius: 0%; transform: rotate(0deg);}
}

Van rond naar vierkant en groeien

@keyframes keyframe-from-round-grow {
  from { border-radius: 50%; transform: scale(0); }
  to { border-radius: 0%; transform: scale(1);}
}

Wiebelen

@keyframes keyframe-wobble {
  0% { transform: translate3d(0, 0, 0); }
  15% { transform: translate3d(-20%, 0, 0) rotate3d(0, 0, 1, -6deg); }
  30% { transform: translate3d(15%, 0, 0) rotate3d(0, 0, 1, 5deg); }
  45% { transform: translate3d(-12%, 0, 0) rotate3d(0, 0, 1, -4deg); }
  60% { transform: translate3d(8%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  75% { transform: translate3d(-4%, 0, 0) rotate3d(0, 0, 1, -2deg); }
  100% { transform: translate3d(0, 0, 0); }
}

Wippen

@keyframes keyframe-seesaw {
  20% { transform: rotate3d(0, 0, 1, 18deg) skewX(18deg); }
  40% { transform: rotate3d(0, 0, 1, -12deg) skewX(-12deg); }
  60% { transform: rotate3d(0, 0, 1, 7deg) skewX(7deg); }
  80% { transform: rotate3d(0, 0, 1, -5deg) skewX(-5deg); }
  100% { transform: rotate3d(0, 0, 1, 0deg) skewX(0deg); }
}

Puls

@keyframes keyframe-pulse {
  0% { transform: scale3d(1, 1, 1); }
  25% { transform: scale3d(1.1, 1.1, 1.1); }
  50% { transform: scale3d(1, 1, 1); }
  75% { transform: scale3d(1.1, 1.1, 1.1); }
  100% { transform: scale3d(1, 1, 1); }
}

Swingen

@keyframes keyframe-swing {
  20% { transform: rotate3d(0, 0, 1, 18deg); }
  40% { transform: rotate3d(0, 0, 1, -12deg); }
  60% { transform: rotate3d(0, 0, 1, 7deg); }
  80% { transform: rotate3d(0, 0, 1, -5deg); }
  100% { transform: rotate3d(0, 0, 1, 0deg); }
}

Custom via CSS blur

@keyframes keyframe-blur {
  0%   {filter: blur(2px);}
  100% {filter: blur(0px);}
}

section.imgBlur .in-view.col2-1 {
  animation: keyframe-blur 3s;
  animation-timing-function: ease;
}

Custom via CSS gray

@keyframes keyframe-gray {
  0%   {filter: grayscale(100%);}
  100% {filter: grayscale(0%) ;}
}

section.imgBlur .in-view.col2-2 {
  animation: keyframe-gray 3s;
  animation-timing-function: ease;
}