<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Bitter:400,700' rel='stylesheet' type='text/css'><style>
body {
-webkit-animation: backgroundcolors 3s infinite;
-moz-animation: backgroundcolors 3s infinite;
animation: backgroundcolors 3s infinite;
font-size: 60px;
}
table {
margin: 0 auto;
margin-top: 160px;
}
table tr {
-webkit-animation: colors 3s infinite;
-moz-animation: colors 3s infinite;
animation: colors 3s infinite;
font-family: 'Bitter', serif;
font-size: 60px;
}
table tr:nth-child(1) {
animation-delay:0.5s;
-webkit-animation-delay:0.5s; /* Safari and Chrome */
}
table tr:nth-child(2) {
animation-delay:1.25s;
-webkit-animation-delay:1.25s; /* Safari and Chrome */
}
table tr:nth-child(3) {
animation-delay:1.5s;
-webkit-animation-delay:1.5s; /* Safari and Chrome */
}
table tr:nth-child(4) {
animation-delay:1.75s;
-webkit-animation-delay:1.75s; /* Safari and Chrome */
}
table tr:nth-child(5) {
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari and Chrome */
}
@keyframes colors {
0% {
color: #8A0E1E;
}
50% {
color: #FF3300;
}
100% {
color: yellow;
}
}
@-moz-keyframes colors {
0% {
color: #8A0E1E;
}
50% {
color: #FF3300;
}
100% {
color: yellow;
}
}
@-webkit-keyframes colors {
0% {
color: #8A0E1E;
}
50% {
color: #FF3300;
}
100% {
color: yellow;
}
}
@keyframes backgroundcolors {
0% {
background: yellow;
}
50% {
background: #33CCFF;
}
100% {
background: #FF3300;
}
}
@-webkit-keyframes backgroundcolors {
0% {
background: yellow;
}
50% {
background: #33CCFF;
}
100% {
background: #FF3300;
}
}
</style>
</head>
<body>
<section class="table">
<table>
<tr><th>S</th><th>A</th><th>T</th><th>O</th><th>R</th></tr>
<tr><th>A</th><th>R</th><th>E</th><th>P</th><th>O</th></tr>
<tr><th>T</th><th>E</th><th>N</th><th>E</th><th>T</th></tr>
<tr><th>O</th><th>P</th><th>E</th><th>R</th><th>A</th></tr>
<tr><th>R</th><th>O</th><th>T</th><th>A</th><th>S</th></tr>
</table>
</section>
</body>
</html>