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