<style type="text/css">div{width:100px;height:100px;background:red;position:relative;animation-name:mymove; /定义动画名称/animation-duration:5s; /定义动画韶光/animation-timing-function:linear; /定义动画速率曲线/animation-delay:2s; /定义动延迟韶光/animation-iteration-count:3; /定义动画的播放次数/animation-direction:alternate; /定义动画播放的方向// Safari and Chrome浏览器兼容代码 /-webkit-animation-name:mymove;-webkit-animation-duration:5s;-webkit-animation-timing-function:linear;-webkit-animation-delay:2s;-webkit-animation-iteration-count:3;-webkit-animation-direction:alternate;}@keyframes mymove{from {left:0px;}to {left:200px;}}@-webkit-keyframes mymove{ / Safari and Chrome浏览器兼容代码/from {left:0px;} /动画开始和结束时的状态/to {left:200px;} /动画中间时的状态/}</style>
视频加载中...
1、transition-property属性
transition-property 属性用于指定运用过渡效果的CSS属性的名称，其过渡效果常日在用户将指针移动到元素上时发生。当指定的CSS属性改变时，过渡效果才开始。其基本语法格式如下：
transition-property: none | all | property;
在上面的语法格式中，transition-property 属性的取值包括none、all和property三个，详细解释如下表所示：
属性值
描述
none
没有属性会得到过渡效果。
all
所有属性都将得到过渡效果。
property
定义运用过渡效果的CSS属性名称，多个名称之间以逗号分隔。
2、transition-duration属性
transition-duration属性用于定义过渡效果花费的韶光，默认值为0，常用单位是秒（s）或者毫秒（ms）。其基本语法格式如下：
transition-duration:time;
3、transition-timing-function属性
transition-timing-function属性规定过渡效果的速率曲线，默认值为ease，其基本语法格式如下：
transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
transition-timing-function属性的取值有很多，常见属性值及解释如下表所示。
属性值
描述
linear
指定以相同速率开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1)）。
ease
指定以慢速开始，然后加快，末了逐步结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）。
ease-in
指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果，等同于cubic-bezier(0.42,0,1,1）。
ease-out
指定以慢速结束（淡出效果）的过渡效果，等同于cubic-bezier(0,0,0.58,1）。
ease-in-out
指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1）。
cubic-bezier(n,n,n,n)
定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间。
4、transition-delay属性
transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。transition-delay的属性值可以为正整数、负整数和0。当设置为负数时，过渡动作会从该韶光点开始，之前的动作被截断；设置为正数时，过渡动作会延迟触发。其基本语法格式如下：
transition-delay:time;
5、transition属性
transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。其基本语法格式如下
transition：property duration timing-function delay;
在利用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。
