三、css3-动画(animation)

时间 2021-04-17

标签 php css html css3 web 动画 code orm htm blog 栏目 CSS 繁體版

原文原文链接

css3-动画（animation）：
具备如下属性：
一、animation-name 自定义动画名称
二、animation-duration 动画指定须要多少秒或毫秒完成，默认值是0;
三、animation-timing-function 动画的时间曲线，linear 匀速， ease 先慢后快，结束前变慢。
四、animation-delay 动画在启动前的延迟间隔，默认是0
五、animation-iteration-count 动画的播放次数，默认是1
六、animation-direction 是否轮流反向播放动画
七、animation-play-state 动画是否正在运行或已暂停。值：paused 指定暂停动画； running 指定正在运行的动画，默认。

实例：本demo以平移（translate）为例说明动画的整个过程
html:php

<body>
        <div class="warp">
            
        </div>
</body>

css:css

.warp{
        height: 100px;
         width: 100px;
         border: 1px 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.2s 3;
}

@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 */
    }
}

　　
　　
转载于猿2048:➥《三、css3-动画(animation)》html