animation
设置对象的动画特效
 
有6个主要的值
animation-name   动画名称
animation-duration   动画持续时间
animation-timing-function    动画过渡类型
     linear:线性过渡
     ease:平滑过渡
     ease-in:由慢到快
     ease-out:由快到慢
     ease-in-out:由慢到快再到慢
animation-delay   动画延迟时间
animation-iteration-count   动画的循环次数
infinite:无限循环
<number>:指定对象动画的具体循环次数
animation-direction   动画在循环中是否反向运动 
normal :  正常方向(默认值)
reverse : 反方向运行
alternate : 先正常运行再反向运行,并持续交替运行
alternate-reverse : 动画先反运行再正方向运行,并持续交替运行
animation-fill-mode    设置对象动画时间之外的状态
none :  默认值,不设置对象动画之外的状态
forwards : 设置对象状态为动画结束时的状态
backwards : 设置动画状态为动画开始时的状态
both : 设置对象状态为动画开始或结束时的状态 
@-webkit-keyframes animation_name{
     0%{-webkit-transform:scale(0);opacity:0;}
     20%{-webkit-transform:scale(1);opacity:1; }
     50%{-webkit-transform:scale(1.2);opacity:1; }
     100%{-webkit-transform:scale(1);opacity:0; }
}
@keyframes 动画名{}
设置动画不同帧数是的样式状态。配合动画名使用。
 

css3的animation动画的更多相关文章

  1. 模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果)

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  2. 第100天:CSS3中animation动画详解

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...

  3. CSS3 :animation 动画

    CSS3动画分为二部份: 1.定义动画行为: 使用@keyframes定义动画行为,有两种方式: 方式一:仅定义动画起始样式,与动画结束样式 @keyframes (动画行为名称) { from {b ...

  4. 监听css3的animation动画和transition事件

    webkit-animation动画有三个事件: 开始事件: webkitAnimationStart 结束事件: webkitAnimationEnd 重复运动事件: webkitAnimation ...

  5. CSS3:animation动画

    animation只应用在页面上已存在的DOM元素上,学这个不得不学keyframes,我们把他叫做“关键帧”. keyframes的语法法则: @keyframes flash { from{ le ...

  6. CSS3 animation 动画

    今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...

  7. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  8. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  9. CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

    ---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYP ...

随机推荐

  1. poj3422K方格取数——最大费用最大流

    题目:http://poj.org/problem?id=3422 最大费用最大流: 拆点,在自点之间连两条边,一条容量为1,边权为数字:一条容量为k-1,边权为0:表示可以走k次,只有一次能取到数字 ...

  2. spring cloud之简单介绍

    以下是来自官方的一篇简单介绍: spring Cloud provides tools for developers to quickly build some of the common patte ...

  3. codec can't decode byte 0xe6 in position 0: ordinal not in range

    ascii' codec can't decode byte 0xe6 in position 0: ordinal not in range(128)] 错误: 实例 "linux-cor ...

  4. vs2013错误 1 Unable to find messages file 'cscui.dll'

    最近使用VS编译的时候,提示错误 错误 1 Unable to find messages file 'cscui.dll' 搜索后,几乎只有1个结果,就是搜索cscui.dll  把正常大小的文件替 ...

  5. Centos7.2 安装配置 Tengine(nginx)

    一.下载tengine wget http://tengine.taobao.org/download/tengine-2.2.2.tar.gz 二.安装tenginx(nginx)的模块依赖库 yu ...

  6. HDU - 1869 六度分离 Floyd多源最短路

    六度分离 1967年,美国著名的社会学家斯坦利·米尔格兰姆提出了一个名为“小世界现象(small world phenomenon)”的著名假说,大意是说,任何2个素不相识的人中间最多只隔着6个人,即 ...

  7. css hack汇总

    注意点: 网上很多资料中常常把!important也作为一个hack手段,其实这是一个误区.!important常常被我们用来更改样式,而不是兼容hack.造成这个误区的原因是IE6在某些情况下不主动 ...

  8. Redis在windows实现将数据缓存起来定时更新读取

    实现接口的读取存放在内存中,实现了Web网站直接读取内存数据,大大的减少了访问接口带来的等待时间,这个功能是比较实用的 需要下载一下‘类库’及‘Redis-x64-3.2.100程序包’ 百度云材料下 ...

  9. 数据库路由中间件MyCat - 使用篇(2)

    此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 基本概念 3. 分片 3.1 分片节点(dataNode) 表被水平切分后,每个分片表所在的数据库就是一个分 ...

  10. jmeter压力测试报告

    XXX压力测试报告 时间:2015-08-04                                             测试人员:xxx 目录 XXX压力测试报告... 1 一  测试 ...