​x
 
1
<!DOCTYPE html>
2
<title>Example</title>
3
<style>
4
.animatedBox {
5
  width: 300px;
6
  height: 200px;
7
  text-align: center;
8
  font: 24px/200px sans-serif;
9
  color: white;
10
  background-color: red;
11
  animation: myAnimation 12s ease 1s 1 forwards;
12
}
13
​
14
@keyframes myAnimation {
15
  33% {
16
    background-color: green;
17
  }
18
  66% {
19
    background-color: blue;
20
  }
21
}
22
</style>
23
​
24
<div class="animatedBox">Background Color</div>