CSS Theory - Animation

Notice! *These posts are basically my learning notes.*
There can misinformation and mistakes :(
If you find any wrong info, please leave a comment and I will get to it asap!

Animation

How to Create CSS Animation

• In order to create CSS Animation, you need to create keyframes
• You can place it at the top of the CSS file as below

@keyframes animationName {
}

• Inside, you need to set from and to

@keyframes animationName {
  from {
    transform: rotateX(0);
  }
  to {
    transform: rotateX(360deg);
  }
}

• After animation is setup on keyframe, you can input the the animation to an element as below

div {
  animation: animationName 3s ease-in-out inifinite;
}

• Adding infinite will play the animation over and over

Making Smooth Animation

• In order to make animation more smooth, instead of setting from and to, you can replace them with percentages

@keyframes animationName {
  0% {
    transform: rotateX(0);
  }
  50% {
    transform: rotateX(180deg) translateY(-100px);
  }
  100% {
    transform: rotateX(0);
  }
}

• When you make 0% and 100% same, animation will finish at the same position thus making the repitition more smooth