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代码。