Difference between revisions of "CSS animations"
From Publication Station
| Line 1: | Line 1: | ||
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) [https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function 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 | * jumping to another state mid animation | ||
Revision as of 10:06, 15 November 2018
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
