CSS动画效果之animation

编程之家收集整理的这篇文章主要介绍了CSS动画效果之animation编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Y(^o^)Y

css动画大乱弹之animation。

 

概述

什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧)。@keyframe算是一个动画模板。在其中,可以使用百分比,如从0%到100%的任意值,分别在每个百分比中,加上不同的属性,从而让元素达到一种在不断变化的动画效果。这和我们制作flash动画一样,我们只需设计几个关键帧,系统就能生成动画啦!

一个@keyframe例子:

 1 /*定义关键帧动画*/
 2     @keyframes myframe {
 3        0%{
 4            width: 100px;
 5            height: 6            border-radius: 50%;
 7        }
 8         50%{
 9             width: 200px;
10             height:11             border-radius:12         }
13         100%{
14 15 16 17         }
18     }

分别定义了动画0%(开始时),50%(播放一半时),100%(播放结束时)的效果,浏览器就能直接生成动画了。

ok,回到上面的问题:什么是animation?animation就是利用关键帧来设置动画的一个工具。可以这么想,关键帧就是一个“动画模型”,animation就是“播放器模型”。

 

animation的常用属性

1.animation-name: @keyframe动画的名称

2.animation-duration: 动画完成一个周期需要的时间,默认是0。

3.animation-timing-function:动画的速度趋势(缓动效果),默认是ease。

4.animation-delay: 动画开始的延迟时间,默认是0。

5.animation-iteration-count: 动画播放的次数,默认是1。可以使用数字,也可以使用“infinite”,表示无限次循环播放。

6.animation-direction: 动画下一次播放的顺序,可以顺序或逆序,默认是"normal"。

7.animation-play-state: 动画是否正在运行或暂停,默认是"running"。

8.animation-fill-mode: 对象动画时间之外的状态。

 

animation与transition的区别

animation是针对@keyframe而言的,它只是在事件发生时触发动画,但是并不改变原来的属性,当事件完成,又恢复原样。transition强调是过渡动画,它是确确实实改变了属性

 

实例

在浏览器中央有一个红色的正方形,鼠标放上去,变为圆形。鼠标移除,变为正方形。

 1 <!DOCTYPE html>
<html lang="en">
 3 <head>
 4     <Meta charset="UTF-8">
 5     <title>animation</title>
 6 </head>
 7 <style type="text/css">
    .Box{
        width:        height:        margin: 50px auto;                              水平居中12         background-color: #f00;                         设置红色13     }
14     .Box:hover{
       animation-name:myframe;                         要使用的关键帧动画的名称        animation-delay: 100ms;                        鼠标放上后延迟100ms发生动画17         animation-duration: 1s;                        动画持续一秒18        animation-timing-function:ease-in;              加速播放19        animation-iteration-count: infinite;            循环播放20     }
21     22 23 24 25 26 27        }
28 29 30 31 32         }
33 34 35 36 37         }
38     }
39 
40 </style>
41 <body>
42 <div class="Box"></div>
43 </body>
44 </html>

 

总结

以上是编程之家为你收集整理的CSS动画效果之animation全部内容,希望文章能够帮你解决CSS动画效果之animation所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

相关文章

猜你在找的CSS相关文章

Y(^o^)Y css动画大乱弹之animation。 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧)。@keyframe算是一个动画模板。在其中,
O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下。 CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition。 概述 看一段比
用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; height:200px; border
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换。 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模拟单
弹窗是一种常见的交互方式,而蒙层则是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。但是,我们会发现,当弹出遮罩层后,底层body的内容也是可以滚动,显然这不是我们想要的效果,而这个问
效果图如下: 在盒子模型中我们通常会给盒子设置边框属性,使之完成某些功能和样式我们会使用css中的border属性来设置边框一般会通过连写来设置border,他下面还有width,style,colo
前言 还在用图片制作箭头,三角形,那就太lou了。css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题。 先来看看这段代码: CSS绘制三角形和箭头,不用再用图片了 CSS绘制
最近在使用MarkDown写公众号文章,并使用MarkDown Here进行排版。发现效果还不错,这边分享一个 MarkDown Here的CSS样式。 /*markdown here 的全局配置*/
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注