CSS动画属性

引言

动画是使元素从一种样式逐渐变化为另一种样式的效果。CSS3 中有三个关于动画的样式属性transform、transition和animation。

一、transform

transform：设置元素的形状改变。常用属性有translate、rotate、scale

语法：transform: none|transform-functions;

常用的2D属性值说明：

属性值	描述
translate(x,y)	定义 2D 位移属性 X表示水平方向上的偏移量，正值表示向右，负值表示向左 Y表示垂直方向上的偏移，正值表示向下，负值表示向上 可以拆分为translateX(x)、translateY(y)
rotate( n deg)	定义 2D 旋转属性 n是数字，deg是单位，我们可以理解为角度 n为正时，顺时针旋转n度，反之，逆时针旋转
scale(x,y)	定义 2D 缩放属性 设置width为原有的值的 x 倍，height为原有的值的 y 倍

 

二、transition

transition：设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态。一个动画，我们怎么设置它的启动方式，动画效果怎么样，是快是慢，匀速还是其他，什么时候启动。我们一般都通过 transition 这个过渡属性来设置。

语法：transition: property duration timing-function delay;

属性值	描述
transition-property	过渡效果的 CSS 属性的名称
transition-duration	完成过渡效果需要的时间
transition-timing-function	速度效果的速度曲线
transition-delay	定义过渡效果何时开始

三、animation

animation是关键帧针动画，用来控制整个动画的过程。一个关键帧动画，要包含动画的名称、运行方式。

@keyframes（规定动画的具体实现过程）

@keyframes的使用方法，可以是from->to（等同于0%和100%），也可以是从0%->100%之间任意个的分层设置

 

@keyframes animationName {
    from {
        properties: value;
    }
    percentage {
        properties: value;
    }
    to {
        properties: value;
    }
}
//or
@keyframes animationName {
    0% {
        properties: value;
    }
    percentage {
        properties: value;
    }
    100% {
        properties: value;
    }
}

• animationName：动画名称；
• percentage：百分比值，可以添加多个百分比值；
• properties：样式属性名称，例如：color、left、width等等