html5动画 ease,html5动画

.trans_list{

width: 5%;

height: 65px;

margin:10px 0;

background-color: #486AAA;

color: #fff;

text-align: center;

}

.test{

width: 100px;

height: 100px;

background: red;

transition: width 0.5s ease;

}

.test:hover{

width: 300px;

}

.transBox:hover .trans_list{

margin-left:50%;

border-radius: 25px;

transform:rotate(360deg);

}

.ease{

transition:all 2s ease;

}

.ease_in{

transition:all 2s ease-in;

}

.ease_out{

transition:all 2s ease-out;

}

.ease_in_out{

transition:all 2s ease-in-out;

}

.linear{

transition:all 2s linear;

}

.cubic-bezier{

transition:all 2s cubic-bezier(0.2,0.2,0.2,0.2);

}

CSS3动画效果

transitions动画：过渡效果，从一种样式变成另一种效果

transitions过渡属性如下

transition：简写属性，用于在一个属性中，设置四个过渡属性，复合属性，可以同时定义transition-property，transition-duration，transition-timing-function，transition-delay，语法：transition：property duration transition-timing-functiontransition-property：规定过渡的CSS属性名称，值：none,all,property，none:没有属性会获得过渡效果，all:所有属性会获得过渡效果，property:规定获得过渡效果的CSS属性名称，列表以逗号分隔transition-duration：定义过渡效果花费的时间。默认是0，注意一定要指定时间，否则是没有过渡效果特效的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可以自定义自己的值0到1

transition-delay：定义过渡动画的延迟时间，以秒或者毫秒为单位，transition-delay：time，time指定多少秒或者毫秒之前要等待切换效果开始

animations动画

除了用transition来实现动画效果，也可以用animations来实现复杂的动画效果，但是首先要了解@keyframes，@keyframes规则内

指定一个样式和动画，将逐渐由旧的样式变成新的样式，对多个关键帧来控制动画，可以更酷炫

创建animations动画，用百分比来规划变化发生的时间，0%动画开始时间，100%动画结束时间，例如：

@keyframes mydonghua{

0% {background: red}

50% {background: blue}

100% {background: black}

}

animation-name:规定@keyframes动画名称，animation-name:keyframename | noneanimation-duration：动画一个周期耗费的时间，秒或毫秒，animation-duration: timeanimation-time-function：规定动画时间曲率，默认是ease，值;linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n),step-start,step-end，step-start:马上跳转到动画结束状态，step-end:保持动画开始状态，指导动画执行时间结束。跳至动画结束状态animation-delay:规定动画何时开始，默认0animation-iteration-count：规定动画播放的次数，animation-iteration-count：n | infinite无数次播放animation-direction：规定动画下一周期是否逆向的，默认normal，值：normal,reverse,alternate,alternate-reverse,initial，reverse反向播放，alternate基数次的时候正向播放，偶数次的时候反向播放animation-play-state：规定动画是否运行或者暂停，默认running，值：paused | runninganimation：所有动画的简写属性

ease

ease-in

ease-out

ease-in-out

linear

cubic-bezier