CSS Transforms & Animations

• Transform 2d

  • Transform functions
  • Transform-origin
  • Multiple transforms

• CSS Animations

  • CSS transition
  • CSS animation & keyframes
  • Simple transitions demo

Demo source - https://github.com/ai297/transform-and-animations-demo

CSS transition

• property duration timing-function delay
• JS Event: transitionend - will dispatched when transition is end

Animatable CSS properties: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Cubic-bezier builder: http://roblaplaca.com/examples/bezierBuilder/

Подробно про transition на русском: https://html5book.ru/css3-transition/

Transitions example

CSS animation & keyframes

• animation-name duration timing-function delay iteration-count direction
• animation-name

  {
    from { }
    to { }
  }

• running / paused
• JS Event: animationend - will dispatched when animation is end

Подробно про animation на русском: https://html5book.ru/css3-animation/

Clip-path css animation: https://css-tricks.com/animating-with-clip-path/

Animation example

Simple transition demo (without JS)