体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

2-16编程练习，如何控制循环间延迟？

来源：3-1 @keyframes

ral空

2017-03-17 20:45:06

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
 
<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: mymove 2s infinite alternate;
        }
         
        @keyframes mymove {
            25% {
                transform: rotate(90deg)
            }
            100% {
                transform: rotate(90deg) translateX(-15px);
            }
        }
    </style>
</head>
 
<body>
    <div>></div>
</body>
 
</html>

我这个只能做到后0.5s不动，求解答

写回答

1回答

Hbrsql

2017-03-17

div {

     ......      

     animation: mymove 2.5s infinite alternate;

        }

        @keyframes mymove {

            20% {

                transform: rotate(90deg)

            }

            80% {

                transform: rotate(90deg) translateX(-15px);

            }

        }

供参考.


0

0 学习 · 5760 问题

查看课程

相似问题

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

回答 4

css3动画延迟

回答 3

延迟0.5秒问题

回答 2

2-5 编程练习思路

回答 1

2-16编程练习

回答 1

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