如何做到题目中要求的每次延迟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

这一要求如何实现

学东西要快 2017-07-26

源自：CSS3动画 2-28 编程练习

收起

1回答

好帮手慕糖回答被采纳获得+3积分 2017-07-26 17:44:03

你好，这两种效果都是实现了的哟。

（1）animation-delay属性设置动画在启动前的延迟间隔。

（2）animation-iteration-count属性定义动画应该播放多少次；属性值为infinite时指定动画应该播放无限次。

祝学习愉快！

收起回答

学东西要快提问者 #1

非常感谢！

2017-07-26 17:58:58
hunmix #2

delay不是只对第一次播放有效吗

2018-02-03 20:34:16
Miss路回复 hunmix #3

这里是做了动画的循环的，每次循环就会执行。不知道同学为什么会说值对第一粗播放有效，它只是在动画一开始执行。祝学习愉快！

2018-02-04 10:19:55