共计 4938 个字符，预计需要花费 13 分钟才能阅读完成。
transition、animation 和 transform 是 CSS3 中三个制作动画的重要属性，本篇文章次要对其进行学习理解。一、transitiontransition 容许 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;} 复制代码成果：
- 注意事项不是所有的 CSS 属性都反对 transition，残缺的列表查看这里，以及具体的成果。transition 须要明确晓得，开始状态和完结状态的具体数值，能力计算出中间状态。比方，height 从 0px 变动到 100px，transition 能够算出中间状态。然而，transition 没法算出 0px 到 auto 的中间状态，也就是说，如果开始或完结的设置是 height:
auto，那么就不会产生动画成果。transition 须要事件触发，所以没法在网页加载时主动产生。transition 是一次性的，不能反复产生，除非一再触发。二、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;}
} 复制代码
-
示例 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;}
} 复制代码成果：
http://www.developcls.com
http://www.developcls.com/qa/cf03b2c430bd4a309acaa508bce6ada1…
- 其余属性除了上述次要用到的六个属性外，还要额定介绍两个属性。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 将暂停的动画从新播放，这个属性目前很少内核反对。三、transformtransform 就是变形，次要包含旋转 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。具体示例就不再写了，状况比拟多，实现起来也比较简单。四、总结以上是对于 CSS3 中制作动画的三个属性，内容比拟根底，不过却很实用。仅仅只须要 CSS，即可实现一些较为简单的动画成果，省去了简单的 js 代码。
