Difference between revisions of "CSS animations"
(Created page with " * jumping to another state mid animation https://css-tricks.com/css-animation-tricks/#article-header-id-0 * transform-origin https://css-tricks.com/css-animation-tricks/#ar...") |
|||
(14 intermediate revisions by the same user not shown) | |||
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: name-of-animation (to be used in @keyframes) | |||
* animation-duration: in seconds | |||
* animation-delay: 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; | |||
* animation-play-state: playing, paused; | |||
===@keyframes=== | |||
specifiy what happens at each stage of the animation. | |||
* using percentages of time | |||
* from, to positions | |||
<source lang="html5"> | |||
<!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> | |||
==animation tricks== | |||
===animation-play-state=== | |||
You can set the animation to play or pause when you hover/click in the element | |||
animation-play-state: playing; | |||
animation-play-state: paused; | |||
https://codepen.io/PublicationStation/pen/MzrJXR | |||
=== animation-delay=== | |||
<code>animation-delay</code> sets when an animation starts. | |||
It can start when | |||
* page is loaded: <code>0s</code> | |||
* N seconds after the page is loaded: <code>positive number of seconds</code> | |||
* N seconds before the page is loaded, meaning that it will already be halfway through it: <code>negative number of seconds</code> | |||
https://codepen.io/PublicationStation/pen/BGRPry | |||
=== animation: transform-origin=== | |||
figuring out what is the center point of an element, so that we can rotate/skew/scale it, from it center point, can be a bit tricky. | |||
A simple solution is to | |||
* add in the vector drawing a circle to the center of the element | |||
* in the SVG code see the <code>cx</code> and <code>cy</code> | |||
* those points will be the center of the element | |||
* than we can simply delete the circle for our svg code. | |||
https://codepen.io/PublicationStation/pen/MzmPEg | |||
===animation-timing-function=== | |||
<code>animation-timing-function</code> sets how an animation progresses through the duration of each cycle. | |||
Possible values: | |||
* linear: same speed from start to end | |||
* ease-in: slow at the beginning, fast/abrupt at the end | |||
* ease-out: fast/abrupt at the beginning, slow at the end | |||
* ease-in-out: slow at beginning and end | |||
* steps: makes a staccato motion, between the keyframes in N number of steps: <code>steps(5)</code> | |||
=Links= | |||
* [https://robots.thoughtbot.com/css-animation-for-beginners CCS Animation for Beginners] | |||
* [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations Using CSS Animations] | |||
* [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Tips CSS Animations tips and tricks] | |||
* [https://css-tricks.com/transforms-on-svg-elements/ Transform on SVG Elements] | |||
* [https://www.webdesignerdepot.com/2015/05/the-ultimate-guide-to-web-animation/ The Ultimate Guide to Web Animation] | |||
* | |||
==Examples of interesting uses of web animations== | |||
* https://siliconvalley.baunfire.com/ | |||
* http://distancetomars.com/ | |||
* http://www.sbs.com.au/theboat/ | |||
* http://everylastdrop.co.uk/ | |||
* http://www.bizbrain.org/coffee/ | |||
---- | |||
* jumping to another state mid animation | |||
https://css-tricks.com/css-animation-tricks/#article-header-id-0 | https://css-tricks.com/css-animation-tricks/#article-header-id-0 |
Latest revision as of 11:53, 21 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: name-of-animation (to be used in @keyframes)
- animation-duration: in seconds
- animation-delay: 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;
- animation-play-state: playing, paused;
@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>
animation tricks
animation-play-state
You can set the animation to play or pause when you hover/click in the element animation-play-state: playing; animation-play-state: paused;
https://codepen.io/PublicationStation/pen/MzrJXR
animation-delay
animation-delay
sets when an animation starts.
It can start when
- page is loaded:
0s
- N seconds after the page is loaded:
positive number of seconds
- N seconds before the page is loaded, meaning that it will already be halfway through it:
negative number of seconds
https://codepen.io/PublicationStation/pen/BGRPry
animation: transform-origin
figuring out what is the center point of an element, so that we can rotate/skew/scale it, from it center point, can be a bit tricky. A simple solution is to
- add in the vector drawing a circle to the center of the element
- in the SVG code see the
cx
andcy
- those points will be the center of the element
- than we can simply delete the circle for our svg code.
https://codepen.io/PublicationStation/pen/MzmPEg
animation-timing-function
animation-timing-function
sets how an animation progresses through the duration of each cycle.
Possible values:
- linear: same speed from start to end
- ease-in: slow at the beginning, fast/abrupt at the end
- ease-out: fast/abrupt at the beginning, slow at the end
- ease-in-out: slow at beginning and end
- steps: makes a staccato motion, between the keyframes in N number of steps:
steps(5)
Links
- CCS Animation for Beginners
- Using CSS Animations
- CSS Animations tips and tricks
- Transform on SVG Elements
- The Ultimate Guide to Web Animation
Examples of interesting uses of web animations
- https://siliconvalley.baunfire.com/
- http://distancetomars.com/
- http://www.sbs.com.au/theboat/
- http://everylastdrop.co.uk/
- http://www.bizbrain.org/coffee/
- jumping to another state mid animation
https://css-tricks.com/css-animation-tricks/#article-header-id-0