这篇文章主要讲解了“CSS animation样式如何使用，有什么好处”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS animation样式如何使用，有什么好处”吧！

        今天来大概说说CSS中的animation。animation的加入会使得动画效果更加乐观。

　　animation

　　 animation的实现需要通过keyframes来实现。keyframes（关键帧），类似于flash当中的关键帧。关键帧有其自己的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素颜色，位置，大小，形状等。不过有一点需要注意的是，我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是，其中"0%"不能像别的属性取值一样把百分比符号省略，我们在这里必须加上百分符号（“%”）如果没有加上的话，我们这个keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。

　　不同浏览器下的写法：　　

内核类型	写法
Webkit(Chrome/Safari)	-webkit-animation
Gecko(Firefox)	-moz-animation
Presto(Opera)
Trident(IE)	-ms-animation
W3C	animation

　

 

 

 

 

 

　　属性说明：

　1、animation-name:检索或设置对象所应用的动画名称,必须与规则@keyframes配合使用。动画名可自由取，语义化的更好

　2、animation-duration：检索或设置对象动画的持续时间

　3、animation-timing-function:检索或设置对象动画的过渡类型

　　取值：

　　linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

　　ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

　　ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

　　ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

　　ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

　　cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

　4、animation-iteration-count：检索或设置对象动画的循环次数

　　　　取值：

　　　　infinite：无限循环

　　　　number：指定对象动画的具体循环次数

　5、animation-direction：检索或设置对象动画在循环中是否反向运动

　　　　取值：

　　　　normal：正常方向

　　　　alternate：正常与反向交替

　6、animation-play-state：检索或设置对象动画的状态

　　　　running：运动

　　　　paused：暂停

　7、animation-fill-mode：检索或设置对象动画时间之外的状态

　　　　取值：

　　　　none：默认值。不设置对象动画之外的状态

　　　　forwards：设置对象状态为动画结束时的状态

　　　　backwards：设置对象状态为动画开始时的状态

　　　　both：设置对象状态为动画结束或开始的状态

　　下面举个例子综合说明：

　　CSS代码：

 #animation { width: 250px; height: 250px; background-color: brown; opacity: 0.5; position:absolute; left:40%; overflow: hidden;
                
            } #animation span { font-family: "微软雅黑"; font-size: 20px; color: #ccc; opacity: 0; display: block; margin: 30px;
                
            } #text1:hover { -moz-animation-play-state:paused;/*鼠标经过时暂停动画*/ -webkit-animation-play-state:paused; -o-animation-play-state:paused; -ms-animation-play-state:paused; animation-play-state:paused;

            } #text2:hover { -moz-animation-play-state:paused; -webkit-animation-play-state:paused; -o-animation-play-state:paused; -ms-animation-play-state:paused; animation-play-state:paused;

            } #text1 { -webkit-animation-name:animation1;/*动画名称*/ -webkit-animation-duration:4s;/*动画持续时间*/ -webkit-animation-timing-function:ease-in;/*变化由慢到快*/ -webkit-animation-delay: 2s;/*过了2S后开始动画*/ -webkit-animation-iteration-count: infinite;/*设置动画无限播放*/ -webkit-transform: translate(55px); animation-name:animation1; animation-delay: 4s; animation-timing-function: ease-in; animation-delay: 2s; animation-iteration-count: infinite; transform: translate(55px); -ms-animation-name:animation1; -ms-animation-duration:4s ; -ms-animation-timing-function: ease-in; -ms-animation-delay: 2s; -ms-animation-iteration-count: infinite; -ms-transform: translate(55px); -moz-animation-name:animation1; -moz-animation-delay:4s ; -moz-animation-timing-function: ease-in; -moz-animation-delay: 2s; -moz-animation-iteration-count: infinite; -moz-transform: translate(55px);
            } #text2 { -webkit-animation-name:animation2;/*动画名称*/ -webkit-animation-duration:4s;/*动画持续时间*/ -webkit-animation-timing-function:ease-in;/*变化由慢到快*/ -webkit-animation-delay: 2s;/*过了2S后开始动画*/ -webkit-animation-iteration-count: infinite;/*设置动画无限播放*/ -webkit-transform: translate(60px); animation-name:animation2; animation-delay: 4s; animation-timing-function: ease-in; animation-delay: 2s; animation-iteration-count: infinite; transform: translate(60px); -ms-animation-name:animation2; -ms-animation-duration:4s ; -ms-animation-timing-function: ease-in; -ms-animation-delay: 2s; -ms-animation-iteration-count: infinite; -ms-transform: translate(60px); -moz-animation-name:animation2; -moz-animation-delay:4s ; -moz-animation-timing-function: ease-in; -moz-animation-delay: 2s; -moz-animation-iteration-count: infinite; -moz-transform: translate(60px);        
                    
            } @-webkit-keyframes animation1 { 0%{-webkit-transform: translate(-10px);opacity: 0;} 20%{-webkit-transform: translate(25px);opacity: 0.5;} 45%{-webkit-transform: translate(45px);opacity: 1;} 100%{-webkit-transform: translate(60px);opacity: 0.8;} } @-webkit-keyframes animation2 { 0%{-webkit-transform: translate(280px);opacity: 0;} 30%{-webkit-transform: translate(200px);opacity: 0.5;} 65%{-webkit-transform: translate(130px);opacity: 1;} 100%{-webkit-transform: translate(60px);opacity:0.8;} }

　　HTML代码：　

<div > <span id="text1">这是ly婠婠的博客</span>
    <span id="text2">欢迎访问和评论！</span>            
</div>

效果如下：

解析说明：

在这个例子中，效果如上图。这里主要是利用animation和translate来达到一个文字渐进的效果。translate的作用是让文字根据给定值发生平移。animation则利用关键帧和百分比数值来将平移过程细分成几个帧，然后设置持续时间，一帧帧连接起来形成动画。

上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"CSS animation样式如何使用，有什么好处"的内容，大家可以关注群英网络的其它相关文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用CSS怎样制作矩形边角加粗效果呢

  用CSS怎样制作矩形边角加粗效果呢？有不少朋友对此感兴趣，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。

• css3动画实现方式有多少种？用法是什么？

  css3动画实现方式有多少种？css3动画实现的方式有三种，分别是transition 实现渐变动画、 transform 转变动画、animation 实现自定义动画。接下来我们就来看看这三种方式的实现。

• CSS设置浮动能解决什么问题，如何消除浮动影响

  浮动的定义，设置元素脱离正常的文档流，使元素向左或向右靠近。父元素的边缘，或者其他设置了浮动的元素的边缘。浮动解决的问题，解决文字包围图片的问题；解决间隔问题；可以向左，或者向右排版将文字排版到图片左端。

• css3的transform缩放在IE浏览器下有抖动怎么解决？

  css3的transform缩放在IE浏览器下有抖动怎么解决？因为浏览器的兼容问题，transform: scale();缩放在IE浏览器下会有过渡抖动的问题，那么我们有什么办法可以解决吗？接下来小编就与大家一起来探讨一下。

• CSS里inline-block错位的情况怎么办

  这篇文章主要介绍了CSS解决inline-block的错位问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下