sc0ttj/css-animations-example.html

## css-animations-example.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title><!-- Insert your title here --></title>

<style>

* {
  box-sizing: border-box;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.orange {
  background-color: orange;
}

.blue {
  background-color: blue;
}

.circle {
  border-radius: 50%;
  border: 1px solid #900;
  display: inline-block;
  width: 50px;
  height: 50px;
}
.square {
  border: 1px solid #900;
  display: inline-block;
  width: 50px;
  height: 50px;
}

/** define the animation keyframes */

@keyframes leftAndRight {
  from { transform: translateX(0px)   }
  to   { transform: translateX(100px) }
}

/** up and down overwrites the transforms of animations above if
 *  applied to the same element, to go up/down AND left right, attach
 * both anims to separate elems (one inside the other)
 */
@keyframes upAndDown {
  from { transform: translateY(0px)   }
  to   { transform: translateY(100px) }
}


/** up,down,left,right at same time, no need for multiple elems */
@keyframes leftRightUpDown {
    from {
        transform: translateX(0px) translateY(0px);
    }
    to {
        transform: translateX(100px) translateY(100px);
    }
}

@keyframes spinScale {
    50%{
        transform: rotate(180deg) scale(2);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes fadeInOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(2);
  }
}


/** to create a looping sequence of animations, define them all as one keyframes animation: */
@keyframes upDownThenLeftRight {
    0% {
        transform: translateX(0px) translateY(100px);
    }
    50% {
        transform: translateX(0px) translateY(0px);
    }
    100% {
        transform: translateX(100px) translateY(0px);
    }
}

/** define the animations themselves - classes to be attached to elems */

.leftAndRight {
  animation: leftAndRight 1s 0.5s infinite alternate ease-in forwards;
}

.upAndDown {
  animation: upAndDown 1s 0.5s infinite alternate ease-in forwards;
}

/** combine the previous animations, run once after other..
 *  - NOTE: the durations and delays are timed follow on from each other...
 *  - NOTE: you CANNOT play the whole sequence in a loop!!
    - ..you can only make either of the animations IN the sequence loop forever
 */
.upDownThenLeftRightNoRepeat {
  animation: upAndDown 1s 0.5s 2 alternate ease-in forwards,
             leftAndRight 1s 2.5s 2 alternate ease-in forwards;
}

.upDownThenLeftRight {
  animation: upDownThenLeftRight 2s 0.5s infinite alternate ease-in-out backwards;
}

.spinScale {
  animation: spinScale 2s 0.5s infinite normal linear forwards;
}

.leftRightUpDown {
  animation: leftRightUpDown 1s 0.5s infinite alternate ease-in forwards;
}

.fadeInOut {
  animation: fadeInOut 1s 0.5s infinite alternate ease-in forwards;
}


/** pause the animation if hovering on the element */
.circle:hover,
.square:hover {
  animation-play-state: paused;
}

</style>
</head>
<body>

  <!-- GOOD: goes up and down -->
  <div class="circle green upAndDown"></div>

  <!-- GOOD: goes left and right -->
  <div class="circle green leftAndRight"></div>

  <!-- CAREFUL! You cannot simply apply multiple classes to enable multiple animations: -->
  <div class="circle red leftAndRight upAndDown"></div>  <!-- BAD:  only goes up and down -->
  <div class="circle red upAndDown leftAndRight"></div>  <!-- BAD:  only goes up and down -->

  <!-- NOT GREAT: goes up/down/left/right all at the same time (multiple animations at once, using wrapped elems) -->
  <div class="upAndDown">
    <div class="circle orange leftAndRight"></div>
  </div>

  <!-- GOOD: goes left/right/up/down all at once, using a single elem and single animation -->
  <div class="square green leftRightUpDown"></div>

  <!-- GOOD: spins and scale at the same time -->
  <div class="square green spinScale"></div>

  <!-- GOOD: fades and scales in/out at the same time -->
  <div class="square green fadeInOut"></div>

  <!-- BAD: goes up and down, then left and right (sequential animations, cannot be looped!) -->
  <div class="circle red upDownThenLeftRightNoRepeat"></div>

  <!-- GOOD: up,down, then lfet, right (a single, sequential animation, _can_ be looped!) -->
  <div class="circle green upDownThenLeftRight"></div>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title><!-- Insert your title here --></title>

	<style>

	* {
	box-sizing: border-box;
	}

	.green {
	background-color: green;
	}

	.red {
	background-color: red;
	}

	.orange {
	background-color: orange;
	}

	.blue {
	background-color: blue;
	}

	.circle {
	border-radius: 50%;
	border: 1px solid #900;
	display: inline-block;
	width: 50px;
	height: 50px;
	}
	.square {
	border: 1px solid #900;
	display: inline-block;
	width: 50px;
	height: 50px;
	}

	/** define the animation keyframes */

	@keyframes leftAndRight {
	from { transform: translateX(0px) }
	to { transform: translateX(100px) }
	}

	/** up and down overwrites the transforms of animations above if
	* applied to the same element, to go up/down AND left right, attach
	* both anims to separate elems (one inside the other)
	*/
	@keyframes upAndDown {
	from { transform: translateY(0px) }
	to { transform: translateY(100px) }
	}


	/** up,down,left,right at same time, no need for multiple elems */
	@keyframes leftRightUpDown {
	from {
	transform: translateX(0px) translateY(0px);
	}
	to {
	transform: translateX(100px) translateY(100px);
	}
	}

	@keyframes spinScale {
	50%{
	transform: rotate(180deg) scale(2);
	}
	100% {
	transform: rotate(360deg) scale(1);
	}
	}

	@keyframes fadeInOut {
	0% {
	opacity: 1;
	transform: scale(1);
	}

	100% {
	opacity: 0;
	transform: scale(2);
	}
	}


	/** to create a looping sequence of animations, define them all as one keyframes animation: */
	@keyframes upDownThenLeftRight {
	0% {
	transform: translateX(0px) translateY(100px);
	}
	50% {
	transform: translateX(0px) translateY(0px);
	}
	100% {
	transform: translateX(100px) translateY(0px);
	}
	}

	/** define the animations themselves - classes to be attached to elems */

	.leftAndRight {
	animation: leftAndRight 1s 0.5s infinite alternate ease-in forwards;
	}

	.upAndDown {
	animation: upAndDown 1s 0.5s infinite alternate ease-in forwards;
	}

	/** combine the previous animations, run once after other..
	* - NOTE: the durations and delays are timed follow on from each other...
	* - NOTE: you CANNOT play the whole sequence in a loop!!
	- ..you can only make either of the animations IN the sequence loop forever
	*/
	.upDownThenLeftRightNoRepeat {
	animation: upAndDown 1s 0.5s 2 alternate ease-in forwards,
	leftAndRight 1s 2.5s 2 alternate ease-in forwards;
	}

	.upDownThenLeftRight {
	animation: upDownThenLeftRight 2s 0.5s infinite alternate ease-in-out backwards;
	}

	.spinScale {
	animation: spinScale 2s 0.5s infinite normal linear forwards;
	}

	.leftRightUpDown {
	animation: leftRightUpDown 1s 0.5s infinite alternate ease-in forwards;
	}

	.fadeInOut {
	animation: fadeInOut 1s 0.5s infinite alternate ease-in forwards;
	}


	/** pause the animation if hovering on the element */
	.circle:hover,
	.square:hover {
	animation-play-state: paused;
	}

	</style>
	</head>
	<body>

	<!-- GOOD: goes up and down -->
	<div class="circle green upAndDown"></div>

	<!-- GOOD: goes left and right -->
	<div class="circle green leftAndRight"></div>

	<!-- CAREFUL! You cannot simply apply multiple classes to enable multiple animations: -->
	<div class="circle red leftAndRight upAndDown"></div> <!-- BAD: only goes up and down -->
	<div class="circle red upAndDown leftAndRight"></div> <!-- BAD: only goes up and down -->

	<!-- NOT GREAT: goes up/down/left/right all at the same time (multiple animations at once, using wrapped elems) -->
	<div class="upAndDown">
	<div class="circle orange leftAndRight"></div>
	</div>

	<!-- GOOD: goes left/right/up/down all at once, using a single elem and single animation -->
	<div class="square green leftRightUpDown"></div>

	<!-- GOOD: spins and scale at the same time -->
	<div class="square green spinScale"></div>

	<!-- GOOD: fades and scales in/out at the same time -->
	<div class="square green fadeInOut"></div>

	<!-- BAD: goes up and down, then left and right (sequential animations, cannot be looped!) -->
	<div class="circle red upDownThenLeftRightNoRepeat"></div>

	<!-- GOOD: up,down, then lfet, right (a single, sequential animation, _can_ be looped!) -->
	<div class="circle green upDownThenLeftRight"></div>

	</body>
	</html>