html5 动画过渡效果,HTML5动画过度与动画效果

HTML5动画过度与动画效果

标签：Web前端

1、动画过渡属性 transition

1、transition的功能定义

transition的作用是实现css属性值在特定时间段内的平滑过渡。这种效果可以在鼠标点击、拖动、取得焦点以及任何元素发生更改时触发，并以动画形式优雅地改变css的属性值。

2、transition可定义的属性

指定哪些属性执行过渡操作。 定义完成过渡所需的时间长度，默认值为0秒。 通过该属性可配置动画的平滑程度，默认采用Ease函数（逐渐变慢的效果）。 其他常见预设值包括Ease-In（启动时加速）、Ease-Out（结束时减速），以及Ease-In-Ott（启动时加速后又减速）等。 指定动画执行开始所需的延迟时间，默认无延迟。

3、代码示例

transition-示例-Ruo.L

.box{

width: 100px;

height:100px;

margin:50px auto;

background-color:#f00;

transition:all 1s;

}

.box:hover{

width:200px;

height:200px;

border-radius:50%;

background-color:#666;

transition:all 1s ease-in 1s;

/*transition-property:width,height,border-radius;

transition-duration:1s;

transition-timing-function:ease-in;

transition-delay:1s; */

}

2、动画效果属性 animation

1、animation 定义

关键帧（@keyframes），其样式定义由一系列百分比值组成，在每个特定的百分比点上附加不同的属性或效果以实现动态效果。其语法结构如下：@keyframes 动作名称 { 从{元素状态}至{元素状态} }。

2、animation属性

animation name: 基于关键帧的动画
animation duration: 完成一个完整循环所需的时间，默认设置为0
animation timing function: 描述动画速度变化的速度曲线（缓动效果），默认设置为"ease"
animation delay: 启动动画所需的延迟时间，默认值为0
animation iteration count: 指定动画播放次数，默认值为1
animation direction: 指定在下一周期中是否倒置播放，默认设置为正向

3、代码示例

animation-示例-Ruo.L

.box{

width: 100px;

height:100px;

margin:50px auto;

background-color:#f00;

}

.box:hover{

-webkit-animation:hover 1s ease-in infinite;

/*—webkit-animation-name:hover;

-webkit-animation-duration:1s;

-webkit—animation-timing-function:ease-in;

-webkit-animation-iteration-count:infinite;

*/

}

@-webkit-keyframes hover{

0%{width:100px;height:100px;border-radius:40%;}

50%{width:200px;height:200px;border-radius:60%;}

100%{width:100px;height:100px;border-radius:40%;}

}