海阔凭鱼跃,天高任鸟飞!

天高任鸟飞

       

利用CSS3制作淡入淡出动画效果

作者:     目录: PHP+MySQL     发表: 2010年06月29日

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; /*延迟时间*/}

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

标签:

39 个评论

  1. 袁源说道:

    lz 开个回复邮件通知吧~都不知道自己被回复了

  2. 袁源说道:

    这个浏览器兼容性怎么样?

    1. 任鸟飞说道:

      Firefox,Opera,Chrome浏览器应该都没问题,IE就别指望了。

  3. JDK说道:

    @任鸟飞 看到那篇文章了,THX..

  4. 任鸟飞说道:

    @JDK 利用Jquery来实现图片异步渐变显示。

  5. JDK说道:

    整页的渐变动画是body加的吧,那下面图片标签的异步显示的渐变是怎么处理的?

  6. 美国优洛说道:

    博主的博客设计很漂亮啊

  7. 会声会影说道:

    我看不懂,太高深的知识

回复 任鸟飞 取消回复