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