Difference between revisions of "CSS animations"
From Publication Station
| Line 5: | Line 5: | ||
A CSS animation is made with resource to 2 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-name: nameofanimation (to be used in keyframes) | ||
* animation-duration: in seconds | * animation-duration: in seconds | ||
| Line 12: | Line 13: | ||
* animation-direction: normal, reverse, alternate, alternate-reverse; | * animation-direction: normal, reverse, alternate, alternate-reverse; | ||
===@keyframes=== | |||
specifiy what happens at each stage of the animation. | |||
* using percentages of time | * using percentages of time | ||
* from, to positions | * from, to positions | ||
<source lang=html> | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<style type="text/css"> | |||
h1 { | |||
animation-name: textanim; | |||
animation-duration: 5s; | |||
animation-timing-function: steps(10); | |||
animation-iteration-count: infinite; | |||
animation-direction:alternate-reverse; | |||
transform-origin: center bottom ; | |||
} | |||
@keyframes textanim { | |||
0% { color:black; | |||
transform: translate(0px,0px); | |||
} | |||
50%{ color:red; | |||
transform: translate(150px,50px); | |||
} | |||
100%{ color:black; | |||
transform: translate(300px,0px); | |||
} | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<h1>Animate this!</h1> | |||
</body> | |||
</html> | |||
</source> | |||
Revision as of 10:07, 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
specifiy what happens at each stage of the animation.
- using percentages of time
- from, to positions
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {
animation-name: textanim;
animation-duration: 5s;
animation-timing-function: steps(10);
animation-iteration-count: infinite;
animation-direction:alternate-reverse;
transform-origin: center bottom ;
}
@keyframes textanim {
0% { color:black;
transform: translate(0px,0px);
}
50%{ color:red;
transform: translate(150px,50px);
}
100%{ color:black;
transform: translate(300px,0px);
}
}
</style>
</head>
<body>
<h1>Animate this!</h1>
</body>
</html>
- 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
