CSS animations - Revision history

Andre: /* animation-play-state */

2018-11-21T11:53:28Z

animation-play-state

← Older revision		Revision as of 11:53, 21 November 2018
Line 61:		Line 61:
	animation-play-state: playing;		animation-play-state: playing;
	animation-play-state: paused;		animation-play-state: paused;

			https://codepen.io/PublicationStation/pen/MzrJXR

	=== animation-delay===		=== animation-delay===

2018-11-20T19:48:46Z

Examples of interesting uses of web animations

← Older revision		Revision as of 19:48, 20 November 2018
Line 109:		Line 109:

	----		----




	* 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~~

2018-11-20T19:48:19Z

Links

@@ Line 97: / Line 97: @@
 * [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]
 ----

2018-11-20T19:10:02Z

animation-timing-function

← Older revision		Revision as of 19:10, 20 November 2018
Line 85:		Line 85:

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

2018-11-20T18:59:55Z

animation-delay

← Older revision		Revision as of 18:59, 20 November 2018
Line 63:		Line 63:

	=== animation-delay===		=== 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		https://codepen.io/PublicationStation/pen/BGRPry

2018-11-20T18:47:15Z

animation-play-state

← Older revision		Revision as of 18:47, 20 November 2018
Line 58:		Line 58:
	==animation tricks==		==animation tricks==
	===animation-play-state===		===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;

	=== animation-delay===		=== animation-delay===

2018-11-15T13:23:27Z

animation: transform-origin

← Older revision		Revision as of 13:23, 15 November 2018
Line 74:		Line 74:

	https://codepen.io/PublicationStation/pen/MzmPEg		https://codepen.io/PublicationStation/pen/MzmPEg




	~~an animation can be quite tricky.~~

	===animation-timing-function===		===animation-timing-function===

2018-11-15T13:23:10Z

@@ Line 58: / Line 58: @@
 ==animation tricks==
 ===animation-play-state===
 === animation-delay===
 ===animation-timing-function===

2018-11-15T10:37:32Z

← Older revision		Revision as of 10:37, 15 November 2018
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

2018-11-15T10:32:38Z

animation properties

← Older revision		Revision as of 10:32, 15 November 2018
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===