<!DOCTYPE html>
<html>
<head>
<style>
#main { width: 250px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div { flex-grow: 0;
flex-shrink: 0;
flex-basis: 50px;
}
#myBlueDiv { animation: mymove 5s infinite;
}
@keyframes mymove { 50% {flex-basis: 200px;}}
</style>
</head>
<body>
<h1>flex-basis 的动画</h1>
<p>逐渐将 BLUE div 的 flex-basis 属性从 50px 更改为 200px，然后返回：<p>
<div id="main">
<div style="background-color:coral;">红色</div>
<div style="background-color:lightblue;" id="myBlueDiv">蓝色</div>
</div>
<p><b>注意：</b> CSS 动画在 Internet Explorer 9 和更早版本中不起作用。</p>
</body>
</html>