Cacher is the code snippet organizer for pro developers

/*
Two step process to create an animation
1. Define the animation
2. Assign it to a specific element (or elements)

Keyframes are a list describing what should happen over the course of the animation

*/

@keyframes slide { // slide - animation name
  
  from {
    transform: translateX(0);  // start from where you are
  }
  to {
    transform: translateX(800px); // 900px to the right
  }
}

// element to apply animation to 
.div {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in; // has a defalt value
  animation-iteration-count: 1  // has default 1 - how many times the animation should run
  animation-delay: 1s // start animation afer 1s delay
}

/* short hand
  animation: <name> <duration> <timing-function> <iteration-count> <delay>
  animation: slide 4s ease 1
  
  note: the order doesn't matter
*/

/* animation-fill-mode : none | forwards | backwards | both

It tells the animating element- what to do outside of actual duration of its animation

forwards: styles from the last key frame are extended beyond the animation duration
  (element stays in the last key frame animation indefinitely)
  
backwards: applies styles from the first executed key frame for the 'delay' duration

both: applies both forwards and backwards behavior
*/

/* animation-direction: normal | reverse | alternate | alternate-reverse

- manipualte in what order our key frames get executed

normal: all iterations of the animation are played as specified (from start to end)
reverse: from end to start
alternate: alternate between each iteration of the animation (start to end, end to start)
alternate-reverse: end-to-start, start-to-end, end-to-start

*/


@keyframes move-left-right {
  0% {
    transform: translateX(100px) rotate(0turn);
  }
  20% {
    transform: translateX(-10px) rotate(-0.5turn);
  }
  100% {
    transform: translateX(450px) rotate(2turn);
  }
}