CSS animations

From Publication Station
Revision as of 10:06, 15 November 2018 by Andre (talk | contribs)

CSS Animations can be used on both HTML elements and SVG drawing elements embedded in a HTML page.


CSS animation parts

A CSS animation is made with resource to 2 parts

animation properties: specify what CSS element will be animated, and how (animation name, how fast, how many times)

  • animation-name: nameofanimation (to be used in keyframes)
  • animation-duration: in seconds
  • animation-timing-function: linear, ease, steps(5) More on animation-timing-function
  • animation-iteration-count: number, infinite
  • animation-direction: normal, reverse, alternate, alternate-reverse;

@keyframes - specifies what happens at each stage of the animation.

  • using percentages of time
  • from, to positions


  • jumping to another state mid animation

https://css-tricks.com/css-animation-tricks/#article-header-id-0

  • transform-origin


https://css-tricks.com/transforms-on-svg-elements/ For SVG elements, the origin is at the 0 0 point of the SVG canvas, assuming we have no transform applied on the element itself or any of its parents inside the <svg> element