​x
 
1
<!DOCTYPE html>
2
<title>Example</title>
3
<style>
4
.animatedBox {
5
  width: 300px;
6
  height: 225px;
7
  text-align: center;
8
  font: 24px sans-serif;
9
  color: white;
10
  text-shadow: 0px 0px 12px black;
11
  background-image: url('/pix/samples/16m.jpg');
12
  background-position: center;
13
  background-repeat: no-repeat;
14
  background-size: 0%;
15
  animation: myAnimation 2s ease 1s 1 forwards;
16
}
17
​
18
@keyframes myAnimation {
19
    100% {
20
      background-size: 100%;
21
    }
22
}
23
</style>
24
​
25
<div class="animatedBox">Animated box</div>