CSS and HTML 5 – Animations

Eli the Computer Guy *NEW, CSS and HTML 5

You can create animations with CSS for everything from alerts to fun widgets on your HTML pages.

animationStyle.css

.animation1 {
	width: 200px;
	height: 200px;
	border: 5px solid black;
	animation: shapeShift;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

@keyframes shapeShift {
	from {border-radius: 0%; background-color: red; }
	to {border-radius: 50%; background-color: green;}
}

.animation2 {
	width: 50px;
	height: 50px;
	background-color: red;
	animation: hereThere;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

.animation3 {
	width: 50px;
	height: 50px;
	background-color: blue;
	border-radius: 50%;
	animation: hereThere;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

@keyframes hereThere {
	0% {margin-left: 0%;}
	10% {margin-left: 10%;}
	20% {margin-left: 5%;}
	30% {margin-left: 40%;}
	40% {margin-left: 20%;}
	50% {margin-left: 80%;}
	90% {margin-left: 15%;}
	100%{margin-left: 100%}
}

animation.html

<html>
<head>
<link rel="stylesheet" href="animationStyle.css" />
</head>
<body>

<div class="animation1"></div>
<br>
<div class="animation2"></div>
<br>
<div class="animation3"></div>

</body>
</html>