Difference between revisions of "CSS animations"

From Publication Station
Line 9: Line 9:
* animation-name: name-of-animation (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
Line 55: Line 56:




==animation tricks==
===animation-play-state===


=== animation-delay===
===animation-timing-function===
=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]
----


* jumping to another state mid animation
* jumping to another state mid animation

Revision as of 10:37, 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-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

animation-delay

animation-timing-function

Links


  • 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