html5动画过渡效果怎么实现

本篇内容介绍了“html5动画过渡效果怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

专注于为中小企业提供成都网站建设、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业宣州免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

1、动画过渡属性 transition

1、transition的功能定义

transition的功能，使css的属性值在一定的时间内平滑地过渡。 这种效果可以在鼠标点击、划过、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

2、transition可定义的属性

transition-property:设置哪些属性进行过渡 transition-duration：完成过渡动画效果的时间，默认是0。 transition-timing-function:设置动画的缓动效果，默认是ease(逐渐变慢)。 其它常用值：ease-in，加速； ease-out，减速； ease-in-otlt,加速然后减速。 transition-delay:设置动画开始的延迟时间，默认是0

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;

}

2、动画效果属性 animation

1、animation 定义

"关键帧"(@keyframes),它的样式规则是由多个百分比构成的，如"0％"到 "100％"之间，分别在每一个百分比中，加上不同的属性，从而让元素达到一种 在不断变化的效果。语法规则如下： @keyframes 动画名称{ 0％{元素状态} 100％{元素状态} }

2、animation属性

animation-name:@keyframes动画的名称 animation-duration：动画完成一个周期所花费的时间，默认是0。 animation-timing-function:动画的速度曲线(缓动效果)，默认是"ease"。 animation-delay:动画开始的延迟时间，默认是0。 animation-iteration-count:动画被播放的次数，默认是1。 animation-direction:动画是否在下一周期逆向地播放，默认是"normal"。 animation-play-state:动画是否正在运行或暂停，默认是"running"。 animation-fill-mode：对象动画时间之外的状态。

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-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%;}

}

“html5动画过渡效果怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！