如何在动画/过渡过程中暂停
如何在动画/过渡过程中暂停
提问于 2015-04-26 16:44:29
我有一个图像，我想伸展3秒，然后暂停2秒，然后不伸展3秒。目前，我不知道如何暂停它；动画-延迟只在动画的开头工作，而不是在中间。这是我的密码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Page 2</title>
<style type="text/css">
/* Your styles go here */
img {
width:200px;
height:100px;
animation: widthChange 6s;
-webkit-animation: widthChange 6s;
-moz-animation: widthChange 6s;
-0-animation: widthChange 6s;
}
p {text-align:center}
button {margin:20px}
.stylized {
font-style: italic;
border-width: 5px;
border-color: yellow;
border-style: outset;
}
@-webkit-keyframes widthChange {
0%, 100% {width: 200px;}
50% {width: 400px;}
}
@-o-keyframes widthChange {
0%, 100% {width: 200px;}
50% {width: 400px;} }
@-moz-keyframes widthChange {
0%, 100% {width: 200px;}
50% {width: 400px;}
}
@keyframes widthChange {
0%, 100% {width: 200px;}
50% {width: 400px;}
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// jQuery methods go here...
$(document).ready(function() {
$('img').addClass("loaded");
$('img').addClass("loaded2");
$("#button1").click(function() {
$("button").addClass("stylized");
$("#button1").html("Fancy Button 1");
$("#button2").html("Fancy Button 2");
$("#button3").html("Fancy Button 3");
});
});
});
/* Your additional JavaScript goes here */
</script>
</head>
<body>
<img class = "image" src="elephant.jpg" alt="elephant"/>
<p><button id="button1">Button 1</button><button id="button2">Button 2</button><button id="button3">Button 3</button></p>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2015-04-26 16:54:12
试试这样的东西。如果将暂停时间添加到总时间(获得8秒而不是6秒)，然后计算要使元素保持静态的时间周期(3/8 + 2/8，其中2/8是2秒暂停时间)，然后使元素在结束时返回默认宽度(占总时间的3/8的另一个3/8)，您应该在中间得到2秒的暂停。
这里我只使用默认的animation和@keyframes。为了兼容起见，可以将此代码复制到其他浏览器特定的版本中。
animation: widthChange 8s;
@keyframes widthChange {
0% {width: 200px;}
37.5% {width: 400px;}
62.5% {width: 400px;}
100% {width: 200px;}
}精简示例：http://jsfiddle.net/IronFlare/pjnk6z6f/
Stack Overflow用户
发布于 2015-04-26 16:52:12
您可以通过添加额外的关键帧来做到这一点，如下所示：
https://jsfiddle.net/kh3qa3L6/
例：
@-webkit-keyframes widthChange {
0%, 100% {
width: 200px;
}
25% {
width: 400px;
}
75% {
width: 400px;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29880464
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号