CSS Transform Transition and Animation

Transform

 
  1. rotate(xdeg)
  2. translate(x,y)
  3. scaleX()
  4. scaleY()
  5. scale()
  6. skewX()
  7. skewY()
  8. skew()
  9. rotateX()
  10. rotateY()
  11. rotateZ()
 

Transition

 
  1. transition: property 1s;
  2. transition-duration: 4s;
  3. transition-delay: 5s;
  4. transition-property: 
  5. transition-timing-function:
    ease: slow start, then fast, slow end
    ease-in : slow start
    ease-out: slow end
    ease-in-out: slow start, end
    linear: same speed from start to end
 

Animation

 
@keyframes animation_name{
}
 
  1. animation
  2. animation-name: 
  3. animation-duration:Duration in milliseconds
  4. animation-delay: Delay in milliseconds
  5. animation-iteration-count: n (Number of time animation will repeat)
  6. animation-direction: 
    normal: in forward direction
    reverse: in backward direction|
    alternate: forward then backward
    alternate-reverse: first backward then forward
  7. animation-timing-function:
    ease: slow start, then fast, slow end
    ease-in : slow start
    ease-out: slow end
    ease-in-out: slow start, end
    linear: same speed from start to end
 
© 2016 - 2022, All Rights are Reserved.