学习笔记

精准传达 • 价值共享

洞悉互联网前沿资讯,探寻网站营销规律

查看其它板块

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

作者:狐灵科技 | 2019-12-29 17:20 |点击:

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

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

如没特殊注明,文章均为狐灵科技原创,转载请注明   "利用CSS3制作淡入淡出动画效果
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

网站设计 品牌营销

多一份参考,总有益处

联系狐灵科技,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:15082661954 / 大客户专线:15523356218