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 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''' - 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=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