Program:
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 Animation</title>
<style>
body {
font-family: "Comic Sans MS", sans-serif;
}
/* The animation code */
@keyframes example {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
.simple {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.spin {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
animation: spin 4s infinite linear;
}
@keyframes ticker {
0% {
margin-top: 0
}
25% {
margin-top: -30px
}
50% {
margin-top: -60px
}
75% {
margin-top: -90px
}
100% {
margin-top: 0
}
}
.news {
margin: 20px;
animation: ticker 4s infinite linear;
}
</style>
</head>
<body>
<h3>Simple Animation</h3>
<div class="simple"></div>
<hr>
<h3>Spin Animation</h3>
<div class="spin"></div>
<hr>
<h3>News Animation</h3>
<div class="news">
<p>Latest News: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, voluptatibus?</p>
</div>
<hr>
</body>
</html>
Output:
