Difference between revisions of "CSS animations"

From Publication Station
 
(10 intermediate revisions by the same user not shown)
Line 7: Line 7:
===animation properties===  
===animation properties===  
specify what CSS element will be animated, and how (animation name, how fast, how many times)
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: name-of-animation (to be used in @keyframes)
* animation-duration:  in seconds
* 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-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-iteration-count: number, infinite
* animation-direction: normal, reverse, alternate, alternate-reverse;
* animation-direction: normal, reverse, alternate, alternate-reverse;
* animation-play-state: playing, paused;


===@keyframes===
===@keyframes===
Line 18: Line 20:
* from, to positions     
* from, to positions     


<source lang=html>
<source lang="html5">
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
Line 52: Line 54:
</html>
</html>
</source>
</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/
----




Line 58: Line 117:
* jumping to another state mid animation
* 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
* 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

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 and cy
  • 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

Examples of interesting uses of web animations



  • jumping to another state mid animation

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

Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=CSS_animations&oldid=7115’