您现在的位置是:首页 > 学无止境 > CSS3|Html5
CSS3 Animation 实现对象从右到左渐变的css3动画效果
CSS3 Animation
CSS3中的Animation与HTML5中的Canvas绘制动画不同。Animation只应用在页面上已存在的DOM元素上,而且他跟Flash和JavaScript以及jQuery制作出来的动画效果又不一样,因为我们使用CSS3的Animation制作动画我们可以省去复杂的js,jquery代码(像我这种不懂js的人来说是件很高兴的事了),只是有一点不足之处,我们运用Animation能创建自己想要的一些动画效果,但是有点粗糙,如果想要制作比较好的动画,我建议大家还是使用flash或js等。虽然说Animation制作出来的动画简单粗糙,但我想还是不能减少我们大家对其学习的热情。
在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。前面我们在使用transition制作一个简单的transition效果时,我们包括了初始属性和最终属性,一个开始执行动作时间和一个延续动作时间以及动作的变换速率,其实这些值都是一个中间值,如果我们要控制的更细一些,比如说我要第一个时间段执行什么动作,第二个时间段执行什么动作(换到flash中说,就是第一帧我要执行什么动作,第二帧我要执行什么动作),这样我们用Transition就很难实现了,此时我们也需要这样的一个“关键帧”来控制。那么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。
Keyframes具有其自己的语法规则,他的命名是由"@keyframes"开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样式规则,有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的,如“0%”到"100%"之间,我们可以在这个规则中创建多个百分比,我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性,从而让元素达到一种在不断变化的效果,比如说移动,改变元素颜色,位置,大小,形状等,不过有一点需要注意的是,我们可以使用“fromt”“to”来代表一个动画是从哪开始,到哪结束,也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是,其中"0%"不能像别的属性取值一样把百分比符号省略,我们在这里必须加上百分符号(“%”)如果没有加上的话,我们这个keyframes是无效的,不起任何作用。因为keyframes的单位只接受百分比值。
看一个实例
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
这里我们定义了一个叫“fadeInRight”的动画,他的动画是从0%开始到100%时结束。fadeInRight动画在0%时是透明,translateX取值x表示x轴过渡20px。动画在100%时,不透明,x轴没有过渡值。
Keyframes定义好了以后,我们需要怎么去调用刚才定义好的动画“fadeInRight”。animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点,css3的animation就需要明确的动画属性值,这也就是回到我们上面所说的,我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间段变化的效果。
下面我们来看看怎么给一个元素调用animation属性
li{
animation-name:'fadeInRight';/*动画属性名,也就是我们前面keyframes定义的动画名*/
animation-duration: 2s;/*动画持续时间*/
animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/
animation-delay:1s;/*动画延迟时间*/
animation-iteration-count: infinite;/*定义循环资料,infinite为无限次*/
animation-direction: alternate;/*定义动画方式*/
}
animation中的各个属性的语法和取值
animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*
如下图所示
兼容的浏览器
CSS3的animation到目前为止支持的最好的是webkit内核的浏览器,因为最早提出这个属性的就是safari公司,chrome 浏览器浏览效果更佳。
DEMO一:
这个demo主要是通过在keyframes中改变元素的opacity、translateX两个属性,来达到一种从右到左一种渐变的效果,我们来看看其实现代码
HTML Code:
<nav>
<ul>
<li><a href="/download/" target="_blank">个人网站模板</a></li>
<li><a href="/newsfree/" target="_blank">企业网站模板</a></li>
<li><a href="/web/" target="_blank">网站建设</a></li>
<li><a href="/newshtml5/" target="_blank">HTML5案例</a></li>
<li><a href="/jstt/" target="_blank">技术探讨</a></li>
<li><a href="/news/case/" target="_blank">作品展示</a></li>
</ul>
</nav>
CSS Code:(重点部分代码)
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/*调用animation属性,从而让按钮在载入页面时就具有动画效果 以-webkit为例,请为不同的浏览器添加前缀 */
nav ul li:nth-child(1){
-webkit-animation-name: "fadeInRight"; /*动画名称,需要跟@keyframes定义的名称一致*/
-webkit-animation-duration: 2s;/*动画持续的时间长*/
-webkit-animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/
}
nav ul li:nth-child(2){ -webkit-animation:'fadeInRight' 3s 1} /* 简写 */
nav ul li:nth-child(3){ -webkit-animation:'fadeInRight' 4s 1}
nav ul li:nth-child(4){ -webkit-animation:'fadeInRight' 5s 1}
nav ul li:nth-child(5){ -webkit-animation:'fadeInRight' 6s 1}
nav ul li:nth-child(6){ -webkit-animation:'fadeInRight' 7s 1}
查看演示页面:DEMO
如果各位有更好的建议,可以通过QQ或email等方式联系。感兴趣的朋友请观注本站关于css3的内容更新,我将不断的整理css3相关方面的知识,和大家一起学习,一起探讨。
相关文章
文章评论
本栏推荐
- 十条设计原则教你学会如何设计网页布局!30...
网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...
- 用js+css3来写一个手机栏目导航30...
有些站长说想做一个手机适应的网站,但是导航太难了,如果要使用框架的话,代码非常多,冗余.再用dreamwear打...
- 6条网页设计配色原则,让你秒变配色高手30...
网页设计好不好看,颜色是毋庸置疑要排首位的,所以关于颜色的搭配技巧以及原则,对于每一个要学习web前端设...
- 三步实现滚动条触动css动画效果30...
现在很多网站都有这种效果,我就整理了一下,分享出来。利用滚动条来实现动画效果,ScrollReveal.js 用于...
- 使用CSS3制作文字、图片倒影30...
CSS3制作文字、图片倒影需要涉及到使用CSS3.0新属性之box-reflect。box-reflect属性目前仅在Chrome、Safa...
- 有创意的鼠标悬停效果集锦30...
分享一些用css3技术,三维、伪元素实现一些有创意的悬停效果
点击排行
- CSS3 Animation 实现对象从右到左渐变的css3动画效果30...
CSS3中的Animation与HTML5中的Canvas绘制动画不同。Animation只应用在页面上已存在的DOM元素上,而且他跟...
- 使用CSS3制作文字、图片倒影30...
CSS3制作文字、图片倒影需要涉及到使用CSS3.0新属性之box-reflect。box-reflect属性目前仅在Chrome、Safa...
- css3背景(一)背景图片、颜色渐变、多重背景图30...
background-image:设置或检索对象的背景图像background-repeat:设置或检索对象的背景图像如何铺排填充b...
- 关于响应式Web设计技巧以及入门30...
html5和css3流行至今,我在做响应式的网站一直是在“尝试”的阶段。并没有深入的去研究和学习,浅显的理解...
- 【分享】css3侧边栏导航不同方向划出效果30...
设定一组侧边栏导航菜单,然后可以从任何一边滑出。有两种实现方式,一种固定菜单,一种从左右两侧推出
- CSS3 伪类选择器 nth-child() 的用法30...
伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特...
官方微信
