​x
 
1
<!DOCTYPE html>
2
<title>Example</title>
3
<style>
4
.outer-container {
5
  height: 200px;
6
  display: flex;
7
}
8
​
9
.box {
10
  padding: 10px;
11
  font: 16px sans-serif;
12
  background: gold;
13
  color: white;
14
  flex: 1;
15
}
16
​
17
.animated {
18
  background: yellowgreen;
19
  animation: myAnimation 1s ease 1s 5 alternate forwards;
20
}
21
​
22
@keyframes myAnimation {
23
  100% {
24
    flex: 5;
25
  }
26
}
27
</style>
28
​
29
<div class="outer-container">
30
  <div class="box animated">Animated Box</div>
31
  <div class="box">Box</div>
32
</div>