Difference between revisions of "CSS animations"

From Publication Station
 
(11 intermediate revisions by the same user not shown)
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 properties===
* animation-name: nameofanimation (to be used in keyframes)
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-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''' - specifies what happens at each stage of the animation.
===@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="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/
----




Line 20: 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’