2-16编程怎么每一次延迟.5s？

来源：2-29 编程练习

慕粉223217810

2017-04-02 17:09:21

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2-9</title>
    <style type="text/css">
        div {
            font-family: Arial;
            font-size: 72px;
            font-weight: bold;
            position: fixed;
            right: 0;
            left: 0;
            bottom:50px;
            width: 30px;
            height: 30px;
            margin: auto;
            transform: rotate(90deg);
            /*此处写代码*/
            animation:on 1s 0.5s infinite alternate;
        }
        @keyframes on {
    from { transform: rotate(90deg); bottom:50px;}
    to   { transform: rotate(90deg); bottom:-1px;}
}
    </style>
</head>
<body>
    <div>></div>
</body>
</html>

写回答

1回答

樱桃小胖子

2017-04-02

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .item1{
         list-style: none;
         -webkit-animation: revolving 4s 0s infinite;
         animation: revolving 4s 0s infinite;
        }
        @-webkit-keyframes revolving{
         0,75%{
        -webkit-transform: perspective(700px) rotateX(90deg);
         }
         87.5%{
        -webkit-transform: perspective(700px) rotateX(0deg);
         }
         100%{
        -webkit-transform: perspective(700px) rotateX(-90deg);
         }
        }
    </style>
</head>
    <body>
        <ul>
            <li>慕课网</li>
        </ul>
    </body>
</html>

把总动画设为4秒，然后前75%也就是3秒都没变化（0-75%），之后的25%也就是1秒做动画就可以了。

0 学习 · 5760 问题

查看课程

相似问题

怎么设置每次循环都延迟0.5s啊？

回答 4

css3动画延迟

回答 3

延迟0.5秒问题

回答 2

每一次间隔0.5s问题？

回答 1

2-16前面0.5秒不动是怎么做到的？试了好多次都搞不懂。

回答 1

打开慕课网App查看更多内容