<head>
<style>
.test{
display:block
width:100px
height:20px
border:1px solid #ff0000
-webkit-animation:f0 2s 0.5s 1 linear
-webkit-animation-fill-mode:forwards
}
.test-high{
width:500px
-webkit-animation:f1 2s 0.5s 1 linear
-webkit-animation-fill-mode:forwards
}
@-webkit-keyframes f0{
0%{width:100px}
100%{width:500px}
}
@-webkit-keyframes f1{
0%{height:20px}
100%{height:200px}
}
</style>
</head>
<body>
<div>
<div class="test">会长大的</div>
<button type="button" onclick="goHigher()">变高一点</button>
<script>
function goHigher(){
document.getElementsByClassName("test")[0].className = "test test-high"
}
</script>
这里div.test会变宽到500px停住，当给他添加上test-high类时，会保持500px的宽度，在变高。
这可能就是想要的，关键是再下一个动画开始前将样式调整到上一个动画结束时一样。
你要出发某个事件，才能再次执行动画吧，或通过伪类，或用JS.
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
<style>
.test{
display:block
width:100px
height:20px
border:1px solid #ff0000
-webkit-animation:f0 2s 0.5s 1 linear
-webkit-animation-fill-mode:forwards
}
.test-high{
width:500px
-webkit-animation:f1 2s 0.5s 1 linear
-webkit-animation-fill-mode:forwards
}
@-webkit-keyframes f0{
0%{width:100px}
100%{width:500px}
}
@-webkit-keyframes f1{
0%{height:20px}
100%{height:200px}
}
</style>
</head>
<body>
<div>
<div class="test">我会长大</div>
<button type="button" onclick="goHigher()">变高一点</button>
<script>
function goHigher(){
document.getElementsByClassName("test")[0].className = "test test-high"
}
</script>
</body>
</html>
这里div.test会变宽到500px停住，当给他添加上test-high类时，会保持500px的宽度，在变高。
这可能就是你要的，关键是再下一个动画开始前将样式调整到上一个动画结束时一样。
