欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

animation的属性值

程序员文章站 2022-03-01 20:51:03
...

**

CSS3 animation动画

原理：逐帧动画。会把整个运动过程，划分成100份。它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

最常用的几种属性有以下几种：

1.animation-name : 设置动画的名称 (自定义的)，就是规定需要绑定到选择器的 keyframe 名称

必须存在，默认值为none,表示没有动画。
@keyframes 动画的名字 {
    from {background: red;}
	to {background: yellow;}
}
@keyframes 动画的名字 {
    0% {background: red;}
	100% {background: yellow;}
}
from : 起点位置 , 等价于 0%  
to : 终点位置 ，等价于 100%
注：默认情况下，元素运动完毕后，会停到起始位置。

2.animation-duration : 动画的持续时间，以秒或毫秒计

3.animation-delay : 动画开始的延迟时间

4.animation-iteration-count : 动画的重复次数 ，默认值就是1 ，infinite无限次数

5.animation-timing-function : 动画的运动形式

值 描述
linear 动画从头到尾的速度是相同的
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

6.animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见

 none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%的运动形式在延迟后生效
 backwards  :  在延迟的情况下，让0%的运动形式在延迟前生效
 forwards  :  在运动结束的之后，停到结束位置
 both  :  backwards和forwards同时生效

7.animation-direction : 定义是否应该轮流反向播放动画。

 alternate  :  一次正向(0%~100%)，一次反向(100%~0%)
 reverse : 永远都是反向 , 从100%~0%
 normal (默认值) : 永远都是正向 , 从0%~100%

animation属性在书写通常合并在一起，除非需要单独设置的属性值，animation属性的简写形式为：
animation:code 2s 2s linear infinite alternate forwards;
用法及作用如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>animation练习</title>
    <style>
            #box{
                width: 400px;
                height: 400px;
                border: 1px solid black;
                margin: 0 auto;
            }
            #box2{
                width: 100px;
                height: 100px;
                background: red;
                animation: myMove 2s 3s infinite linear alternate backwards;/*添加动画*/
            }
            @keyframes myMove {
                from {transform: translate(0,0);background: blue;}
                to {transform: translate(300px,0);}
            }
    </style>
</head>
<body>
    <div id="box">
        <div id="box2"> </div>
    </div>
</body>
</html>

执行结果：
1.box2一直在box1内部
2.在0%运动形式延迟前，box2背景变为蓝色
3.运动时间2秒，延迟3秒，沿着X轴无限循环来回匀速移动300px。向右运动背景 逐渐变为红色，向左逐渐变为红色
4.其中myMove是属性名称，2s 运动时间、3s延迟时间

**
HTML5逆战班2002期——animation动画总结

上一篇： animation和@keyframes属性

下一篇： Android BLE蓝牙详细解读（三）

推荐阅读