WEB前端

CSS3动画淡入淡出效果 指定动画时间

位置:首页 > WEB前端 > css3教程,2017-10-07 14:35
CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致。利用CSS3制作动画效果其原理与Fl

CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致。

利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态效果,由CSS3来驱动产生动画效果。

下面讲解一下如何利用CSS3制作淡入淡出的动画效果。


1. 定义动画,名称为fadeIn

@-webkit-keyframes fadeIn {

0% {

opacity: 0; /*初始状态 透明度为0*/

}

50% {

opacity: 0; /*中间状态 透明度为0*/

}

100% {

opacity: 1; /*结尾状态 透明度为1*/

}

}

2.  在ID或类中增加如下的动画代码

#box

{-webkit-animation-name: fadeIn; /*动画名称*/

-webkit-animation-duration: 3s; /*动画持续时间*/

-webkit-animation-iteration-count: 1; /*动画次数*/

-webkit-animation-delay: 0s; /*延迟时间*/}

通过上面的代码即可实现淡入淡出的动画效果,代码具体的含义已在注释中注明。

TAGS:CSS3动画

猜你喜欢

NewHot