Difference between revisions of "CSS animations"

From Publication Station
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-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===

Revision as of 10:32, 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: name-of-animation (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;
  • 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>



  • 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