CSS3 动画 animation-fill-mode:forwards

Posted 2023-05-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 动画 animation-fill-mode:forwards相关的知识，希望对你有一定的参考价值。

在一个动画执行完成之后，希望在该动画的基础上再进行动画操作，该如何书写

你要出发某个事件，才能再次执行动画吧，或通过伪类，或用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的宽度，在变高。

这可能就是你要的，关键是再下一个动画开始前将样式调整到上一个动画结束时一样。

参考技术A

很简单啊你把动画效果连着写就可以啦比如：

$("#box").animate(height:"300px").animate(width:"500px");

这个的意思就是id为box的div宽度变成300px后宽度再变成500px。

不懂欢迎继续提问

参考技术B 具体的我也不太清楚，我也还在看CSS 3 ，给你个CSS 3参考站，去看看他的属性吧.http://css.doyoe.com/