如何做到题目中要求的每次延迟0.5s
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-9</title>
<style type="text/css">
body{
height:1000px;
}
div {
font-family: Arial;
font-size: 72px;
font-weight: bold;
position: fixed;
right: 0;
left: 0;
width: 30px;
height: 30px;
margin: auto;
transform: rotate(90deg);
/*此处写代码*/
bottom:70px;
margin:0 auto;
animation-name:arrow_1;
animation-duration:1s;
animation-timing-function:ease-in-out;
animation-delay:0.5s;
animation-iteration-count:infinite;
animation-direction:normal;
animation-play-state:running;
}
@keyframes arrow_1{
from {bottom:70px;}
50% {bottom:30px;}
70% {bottom:35px;}
to {bottom:20px;}
}
</style>
</head>
<body>
<div>></div>
</body>
</html>3、设置动画为无限循环，每一次延迟.5s
这一要求如何实现
88
收起
正在回答
1回答
你好，这两种效果都是实现了的哟。
（1）animation-delay属性设置动画在启动前的延迟间隔。
（2）animation-iteration-count属性定义动画应该播放多少次；属性值为infinite时指定动画应该播放无限次 。
祝学习愉快！
响应式开发与常用框架 2018
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星