CSS3的动画属性

transition、animation和transform是CSS3中三个制做动画的重要属性，本篇文章主要对其进行学习了解。

1、transition

transition容许css的属性值在必定的时间区间内平滑地过渡。这种效果能够在鼠标单击、得到焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

transition ：transition-property || transition-duration || transition-timing-function || transition-delay;
复制代码

transition主要包含四个属性值：执行变换的属性：transition-property，变换延续的时间：transition-duration，在延续时间段，变换的速率变化：transition-timing-function，变换延迟时间：transition-delay。

1. transition-property

transition-property: none || all || property;
复制代码

transition-property是用来指定当元素其中一个属性改变时执行transition效果。

none: 没有属性会得到过渡效果；

all: 全部属性都将得到过渡效果,也是其默认值；

property: 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

2. transition-duration

transition-duration: time;
复制代码

transition-duration是用来指定元素 转换过程的持续时间，取值time为数值，单位为s（秒）或者ms(毫秒)，其默认值是0，也就是变换时是即时的。

3. transition-timing-function

transition-timing-function: linear || ease || ease-in || ease-out || ease-in-out || cubic-
bezier(n,n,n,n);
复制代码

以上具体取值含义以下：

值	描述
linear	规定以相同速度开始至结束的过渡效果。
ease	规定慢速开始，而后变快，而后慢速结束的过渡效果。
ease-in	规定以慢速开始的过渡效果。
ease-out	规定以慢速结束的过渡效果。
ease-in-out	规定以慢速开始和结束的过渡效果。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义本身的值。可能的值是 0 至 1 之间的数值。

4. transition-delay

transition-delay: time;
复制代码

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值time为数值，单位为s（秒）或者ms(毫秒)， 默认大小是"0"，也就是变换当即执行，没有延迟。

5. 示例

html代码

<div class="one"></div>
复制代码

css代码

.one {
        width: 100px;
        height: 100px;
        margin: 200px auto;
        background-color: #cd4a48;
        -webkit-transition: width, height 2s ease;
        -moz-transition: width, height 2s ease;
        -ms-transition: width, height 2s ease;
        -o-transition: width, height 2s ease;
        transition: width, height 2s ease;
    }

    .one:hover {
        width: 300px;
        height: 300px;
    }
复制代码

效果：

6. 注意事项

• 不是全部的CSS属性都支持transition，完整的列表查看这里，以及具体的效果。
• transition须要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。好比，height从0px变化到100px，transition能够算出中间状态。可是，transition无法算出0px到auto的中间状态，也就是说，若是开始或结束的设置是height: auto，那么就不会产生动画效果。
• transition须要事件触发，因此无法在网页加载时自动发生。
• transition是一次性的，不能重复发生，除非一再触发。

2、animation

不一样于transition只能定义首尾两个状态，animation能够定义任意多的关键帧，于是能实现更复杂的动画效果。

animation: animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction
复制代码

animation主要包含六个属性，具体含义以下：

值	描述
animation-name	规定须要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始以前的延迟，默认值为0。
animation-iteration-count	规定动画应该播放的次数，默认值为1。
animation-direction	规定是否应该轮流反向播放动画，默认值是正向。

1. keyframe

在介绍animation具体使用以前，要先介绍keyframe。

@keyframes 让开发者经过指定动画中特定时间点必须展示的关键帧样式（或者说停留点）来控制CSS动画的中间环节。这让开发者可以控制动画中的更多细节而不是所有让浏览器自动处理。

要使用关键帧, 先建立一个带名称的@keyframes规则，以便后续使用 animation-name这个属性来调用指定的@keyframes. 每一个@keyframes 规则包含多个关键帧，也就是一段样式块语句，每一个关键帧有一个百分比值做为名称，表明在动画进行中，在哪一个阶段触发这个帧所包含的样式。

关键帧的编写顺序没有要求，最后只会根据百分比按由小到大的顺序触发。

@keyframes animationname {keyframes-selector {css-styles;}}
复制代码

具体含义以下：

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。合法的值：0-100%from（与 0% 相同）to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

示例：

@keyframes identifier {
  0% { top: 0; left: 0px}
  50% { top: 30px; left: 20px; }
  100% { top: 0; left: 30px;}
}
复制代码

2. 示例

html代码

<div class="one"></div>
复制代码

css代码

.one {
        width: 100px;
        height: 100px;
        margin: 200px auto;
        background-color: #cd4a48;
        position: relative;
        animation: moveHover 5s ease-in-out 0.2s;

    }


    @keyframes moveHover {
        0% {
            top: 0px;
            left: 0px;
            background: #cd4a48;
        }
        50% {
            top: 200px;
            left: 200px;
            background:#A48992;
        }
        100% {
            top: 350px;
            left:350px;
            background: #FFB89A;
        }
    }
复制代码

效果：

3. 其余属性

除了上述主要用到的六个属性外，还要额外介绍两个属性。

animation-fill-mode

动画结束之后，会当即从结束状态跳回到起始状态。若是想让动画保持在结束状态，须要使用animation-fill-mode属性。

animation-fill-mode: none || backwards || both
复制代码

• none：默认值，回到动画没开始时的状态。
• forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
• backwards：在 animation-delay所指定的一段时间内，在动画显示以前，应用开始属性值（在第一个关键帧中定义）。
• both: 根据animation-direction轮流应用forwards和backwards规则。

animation-play-state

有时，动画播放过程当中，会忽然中止。这时，默认行为是跳回到动画的开始状态。

若是想让动画保持忽然终止时的状态，就要使用animation-play-state属性。

animation-play-state:running || paused
复制代码

animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值，running和paused其中running为默认值。经过paused将正在播放的动画停下了，经过running将暂停的动画从新播放，这个属性目前不多内核支持。

3、transform

transform就是变形，主要包括旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

transform: none || transform-functions
复制代码

none:表示不进么变换；transform-function表示一个或多个变换函数，以空格分开；换句话说就是咱们同时对一个元素进行transform的多种属性操做，例如rotate、scale、translate三种。

主要的transform-function变换函数以下：

1. translate

值	描述
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。

2. scale

值	描述
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	经过设置 X 轴的值来定义缩放转换。
scaleY(y)	经过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	经过设置 Z 轴的值来定义 3D 缩放转换。

3. rotate

值	描述
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。

4. skew

值	描述
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。

5. transform-origin

以上变化的默认参照点是元素的中心点，不过能够经过transform-origin设置元素的参照点。

transform-origin: X || Y || Z
复制代码

其中X，Y，Z对应三维坐标，X，Y，Z的值能够是em，px。此外，X，Y能够是百分值，其中X也能够是字符参数值left，center，right。Y和X同样除了百分值外还能够设置字符值top，center，bottom。

具体示例就再也不写了，状况比较多，实现起来也比较简单。

4、总结

以上是关于CSS3中制做动画的三个属性，内容比较基础，不过却很实用。仅仅只须要CSS，便可实现一些较为简单的动画效果，省去了复杂的js代码。