CSS3动画

最新推荐文章于 2021-08-04 02:28:11 发布

原创最新推荐文章于 2021-08-04 02:28:11 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

CSS3&html5 专栏收录该内容

4 篇文章

订阅专栏

本文深入讲解CSS3动画的实现方式，包括如何使用@keyframes定义动画，以及animation属性的详细说明，如animation-name、animation-duration等，帮助读者掌握网页元素动态效果的制作。

调用动画

	 div{
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
            left: 0;
 			animation：动画名称 花费的时间 运动曲线 等待时间 播放次数（infinite 无限播放） 是否反方向播放
    		animation: move 03s linear 1s 3 alternate;/*默认正方向*/
        }

声明动画
当在@keyframe创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

1.规定动画的名称

2.规定动画的时长


        @keyframes move{
        //from表示开始
        //to表示结束
            /*from{*/
                /*left:0;*/
            /*}*/
            /*to{*/
                /*left: 800px;*/
            /*}*/
	//也可以用百分比来表示动过的过程
            0%{
                left: 0;
                top: 0;
            }
            33.3333333333333%{
                top: 300px;
            }
            66.66666666%{
                left: 300px;
                top:20px;
            }
            100%{
                left: 800px;
            }
        }

CSS3的动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。