style.css

.circle {
    animation-name: voorbeeld1;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    background: red;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.button {
    background: black;
    color: white;
    padding: 20px 40px;
    font-size: 30px;
    display: table;
    border-radius: 10px;
    transform: translateZ(0);
    will-change: transform;
}

/* Hieronder worden CSS TRANSITIONS
   in plaats van keyframe animations gebruikt.
   Weet je het verschil?
   */

.button:hover {
    transition: 1s ease;
    background: green;
}

/* 
    ╔════════════════════════════════════════════════╗
    ║ MAAK HIERONDER JE ANIMATIES!                   ║
    ╚════════════════════════════════════════════════╝
*/

/*
  Hier typ je de keyframes voor je animaties. Er staat een uitgebreide 
  "cheat sheet" hier beneden waarina alle CSS declaraties en properties 
  staan voor het maken van CSS keyframe animaties!!
*/

/*
    ╔════════════════════════════════════════════════╗
    ║  ANIMATION PROPERTY VALUES CHEATSHEET!!        ║
    ╚════════════════════════════════════════════════╝
  
   ANIMATION-NAME
   Specifies the name of the keyframe you want to bind to the selector
   keyframename|none|initial|inherit;
  
   ANIMATION-TIMING-FUNCTION
   Specifies the speed curve of the animation
   linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
  
   ANIMATION-DURATION
   Specifies how many seconds or milliseconds an animation takes to complete
   time|initial|inherit;
  
   ANIMATION-DIRECTION
   Specifies whether or not the animation should play in reverse on alternate cycles
   normal|reverse|alternate|alternate-reverse|initial|inherit;
  
   ANIMATION-FILL-MODE
   Specifies what values are applied by the animation outside the time it is executing. for instance, let the animation END and PAUSE at the last keyframe (forwards)
   none|forwards|backwards|both|initial|inherit;
  
   ANIMATION-ITERATION-COUNT:
   Specifies how many times an animation should be played
   number|infinite|initial|inherit;
  
   ANIMATION-PLAY-STATE
   Specifies whether the animation is running or paused
   paused|running|initial|inherit;
  
  /* 
    ╔════════════════════════════════════════════════╗
    ║  TRANSFORM PROPERTIES CHEATSHEET!!             ║
    ╚════════════════════════════════════════════════╝
  
  TRANSLATION (MOVING)
  
      translate()
      Translates an element 
      on the 2D plane.
  
      translate3d()
      Translates an element 
      in 3D space.
  
      translateX()
      Translates an element 
      horizontally.
  
      translateY()
      Translates an element 
      vertically.
  
      translateZ()
      Translates an element 
      along the z-axis.
                   
  ROTATION
     
      rotate()
      Rotates an element around 
      a fixed point on the 2D plane.
  
      rotate3d()
      Rotates an element around 
      a fixed axis in 3D space.
  
      rotateX()
      Rotates an element around 
      the horizontal axis.
  
      rotateY()
      Rotates an element around 
      the vertical axis.
  
      rotateZ()
      Rotates an element around 
      the z-axis.
  
  SCALING (RESIZING)
  
      scale()
      Scales an element 
      up or down on the 2D plane.
  
      scale3d()
      Scales an element 
      up or down in 3D space.
  
      scaleX()
      Scales an element 
      up or down horizontally.
  
      scaleY()
      Scales an element 
      up or down vertically.
  
      scaleZ()
      Scales an element 
      up or down along the z-axis.
  
  SKEWING (DISTORTION)
  
      skew()
      Skews an element 
      on the 2D plane.
  
      skewX()
      Skews an element 
      in the horizontal direction.
  
      skewY()
      Skews an element 
      in the vertical direction.
  
  */

/* 
    ╔════════════════════════════════════════════════╗
    ║ EASE-IN-OUT CHEATSHEET!!                       ║
    ╚════════════════════════════════════════════════╝
   */

/* VOORBEELDEN VAN VERTRAGING/VERSNELLING (EASE IN-OUT)
  /* transition-timing-function: ease; */
/* transition-timing-function: ease-in; */
/* transition-timing-function: ease-out; */
/* transition-timing-function: ease-in-out; */
/* transition-timing-function: cubic-bezier(0.4, -.2, 0.42, 1.20); */
/* transition-timing-function: steps(7); */
/* transition-timing-function: steps(5, jump-none); */
/* transition-timing-function: steps(8, jump-both); */
/* transition-timing-function: steps(4, jump-start); */
/* transition-timing-function: steps(2, jump-end); */
/* transition-timing-function: step-start; */
/* transition-timing-function: step-end; */
/* transition-timing-function: ease, steps(3), cubic-bezier(1, 0, 0, 1); */
/* }