CSS3 动画 animation-fill-mode:forwards
发布网友
发布时间：2022-04-22 08:14
共3个回答
热心网友
时间：2022-04-06 14:31
你要出发某个事件，才能再次执行动画吧，或通过伪类，或用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的宽度，在变高。
这可能就是你要的，关键是再下一个动画开始前将样式调整到上一个动画结束时一样。
热心网友
时间：2022-04-06 15:49
很简单啊 你把动画效果连着写就可以啦 比如：
$("#box").animate({height:"300px"}).animate({width:"500px"});这个的意思就是id为box的div宽度变成300px后宽度再变成500px。
不懂欢迎继续提问
热心网友
时间：2022-04-06 17:24
