@keyframes设定动画规则,可以理解为动画的剧本。

  Name。自定义一个动画名称。

  0-100%/from...to...。

  需要变化的css样式属性。

animation所有动画属性的简写。(类似于trasition)

  Animation-name动画的名称。

  Animation-duration动画完成需要的时间。

  Animation-timing-function完成动画的速度设置。

  Animation-delay动画延迟的时间。Infinite是无限次播放。

  ,infinite是无限次。

  Animation-direction规定动画在下一周期是否逆向播放。默认是normal顺向播放, 逆向播放是alternate。

  Animation-play-state规定动画是否正在运行或暂停。默认是running正在播放,规  定动画暂停是paused。

  Animation-fill-mode规定动画时间之外的状态。

    None回到起始位置。

    Forwards设置最后一帧:forwards当动画完成后,保持最后一帧的状态。

    Backwards设置第一帧:backwards延时的时间段内,在动画显示之前,应用 开始的属性。

    both同时应用forwards,backwards。

11.css3动画--自定义关键帧动画--@keyframes/animation的更多相关文章

  1. CSS3实现自定义Checkbox动画

    CSS3实现自定义Checkbox动画是一款CSS3自定义checkbox,而且这款checkbox还带有动画效果,当你选中checkbox的时候,会以动画的方式打上一个大大的勾. 源码下载:http ...

  2. html5--6-55 动画效果-关键帧动画

    html5--6-55 动画效果-关键帧动画 实例 @charset="UTF-8"; div{ width: 150px; height: 150px; font-size: 2 ...

  3. ios基础动画、关键帧动画、动画组、转场动画等

    概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画 ...

  4. 核心动画基础动画(CABasicAnimation)关键帧动画

    1.在iOS中核心动画分为几类: 基础动画(CABasicAnimation) 关键帧动画(CAKeyframeAnimation) 动画组(CAAnimationGroup) 转场动画(CATran ...

  5. WPF动画之关键帧动画(2)

    XAML代码: <Window x:Class="关键帧动画.MainWindow" xmlns="http://schemas.microsoft.com/win ...

  6. IOS开发-属性动画和关键帧动画的使用

    CAMediaTiming是一个协议(protocol),CAAnimation是所有动画类的父类,但是它不能直接使用,应该使用它的子类. 继承关系: CoreAnmiation 核心动画 简写CA ...

  7. iOS:核心动画之关键帧动画CAKeyframeAnimation

    CAKeyframeAnimation——关键帧动画 关键帧动画,也是CAPropertyAnimation的子类,与CABasicAnimation的区别是: –CABasicAnimation只能 ...

  8. CSS3过渡动画&关键帧动画

    一.过渡动画 过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画. 所谓的状态就是指大小.位置.颜色.变形(transform)等等这些属性. Note:不是所有属性 ...

  9. CSS3的自定义动画帧

    CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...

随机推荐

  1. nginx 与location语法详解

    Location语法优先级排列   匹配符 匹配规则 优先级 = 精确匹配 1 ^~ 以某个字符串开头 2 ~ 区分大小写的正则匹配 3 ~* 不区分大小写的正则匹配 4 !~ 区分大小写不匹配的正则 ...

  2. bootstrap 学习笔记(部分)

    这个课程中的boostrap是3.0+版本的.(2.0与3.0有区别) bootstrap中的JS是依赖于jquery的,所以需要事先引用jquery(1.9.0版本以上). <!DOCTYPE ...

  3. UIButton设置按钮点击范围大于可视范围

    自定义按钮类型CustomButton,继承UIButton,重写pointInside函数改变点击响应范围. 例如,按钮点击范围比实际高度上下增加6. CustomButton.h @interfa ...

  4. 使用DBLink方式同步远程数据库中含Blob、Clob字段表的问题解决

    在数据库同步中我们经常会用到DBLink方式.DBLink可以将物理上存放于网络的多个数据库在逻辑上当成一个单一的大数据库.开发人员无需关心数据库的网络分布,就能很方便的实现从不同数据库之间读取数据. ...

  5. 1436:数列分段II

    1436:数列分段II 题解 二分答案 我们最终答案的取值区间是[  max(a[i])  ,   ∑a[i]  ] 设定 l=max(a[i]) , r=∑a[i]  , mid不断二分 mid表示 ...

  6. tomcat 日志拆分

    一.用cronolog分割tomcat的catalina.out文件 1.编译安装cronologwget http://cronolog.org/download/cronolog-1.6.2.ta ...

  7. oracle 四舍五入 取得的数值

    SELECT ROUND( number, [ decimal_places ] ) FROM DUAL 说明: number : 将要处理的数值 decimal_places : 四舍五入,小数取几 ...

  8. 阶段3 2.Spring_03.Spring的 IOC 和 DI_4 ApplicationContext的三个实现类

    如何找到接口的实现类 BeanFactory是核心容器的顶层接口 查看接口的实现类 接下来介绍这三个实现类 把bean.xml复制到桌面上面 运行测试程序 实际更常用ClassPathXmlAppli ...

  9. 使用pthread下的mutex与cond_var模拟windows下的event几个接口

    两个版本的链接: https://github.com/neosmart/pevents https://github.com/moya-lang/Event 第一个版本能够模拟等待多个事件中的一个触 ...

  10. 转 Java的各种打包方式(JAR/WAR/EAR/CAR)

    JAR (Java Archive file) 包含内容:class.properties文件,是文件封装的最小单元:包含Java类的普通库.资源(resources).辅助文件(auxiliary ...