css3-动画(animation)

Posted asasas

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3-动画(animation)相关的知识,希望对你有一定的参考价值。

具有以下属性

1;animation-name自定义动画名称

2:animation-duration动画指定需要多岁秒或者毫秒完成,默认值是0;

3:animation-timing-function 动画的时间曲线 linear 匀速 ease先慢后快 结束前变慢

4:animation-delay:动画在启动前的延迟间隔 默认0

5:animation-direction 是否轮流反向播放动画

6:animation-iteration-count动画的播放次数 默认1

7:animation-Play-state动画是否正在运行或已暂停 paused暂停动画 running正在运行的动画默认

实例:本demo以平移(translate)为例说明动画的整个过程

html:

1
2
3
4
5
<body>
        <div class="warp">
             
        </div>
</body>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.warp{
        height100px;
         width100px;
         border1px solid #eee;
             
            animation-name:moves;
            animation-direction:alternate;
            animation-delay: 0.2s;
            animation-duration: 5s;
            animation-play-state: paused;
            animation-iteration-count: 3;
           /*以上可以简写成:*/
           animation: moves 5s linear 0.23;
}
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
@keyframes moves{                           /*动画名称自定义*/
    10%{                                    /*时间点可以任意,10%表示当时间进行到10%是元素要达到的状态*/
        transform: translate(100px,0);      
        -ms-transform:translate(100px,0);    /*IE 9*/
        -moz-transform:translate(100px,0);  /* Firefox */
        -webkit-transform:translate(100px,0); /* Safari 和 Chrome */
        -o-transform:translate(100px,0);    /* Opera */
    }
    30%{                                    /*时间点可以任意*/
        transform: translate(100px,100px);
        -ms-transform:translate(100px,100px);    /*IE 9*/
        -moz-transform:translate(100px,100px);  /* Firefox */
        -webkit-transform:translate(100px,100px); /* Safari 和 Chrome */
        -o-transform:translate(100px,100px);    /* Opera */
    }
    60%{                                       /*时间点可以任意*/
        transform: translate(0,100px);
        -ms-transform:translate(0,100px);    /*IE 9*/
        -moz-transform:translate(0,100px);  /* Firefox */
        -webkit-transform:translate(0,100px); /* Safari 和 Chrome */
        -o-transform:translate(0,100px);    /* Opera */
    }
    100%{                                /*时间点可以任意*/
        transform: translate(0,0);
        -ms-transform:translate(0,0);    /*IE 9*/
        -moz-transform:translate(0,0);  /* Firefox */
        -webkit-transform:translate(0,0); /* Safari 和 Chrome */
        -o-transform:translate(0,0);    /* Opera */
    }
}

以上是关于css3-动画(animation)的主要内容,如果未能解决你的问题,请参考以下文章

linux操作系统及常见命令

13.01python语言基础(元类)

深度学习-机器视觉学习路线

linux操作系统基础2

对称加密算法和非对称加密算法

LCS问题