@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. HBuilder搭建Android模拟器

    HBuilder搭建Android模拟器  //来源:  https://www.cnblogs.com/bjxingch/articles/6657938.html  1.下载夜神Android模拟 ...

  2. C++入门经典-例6.13-指针与二维数组

    1:代码如下: // 6.13.cpp : 定义控制台应用程序的入口点. // #include"stdafx.h" #include<iostream> using ...

  3. 链表栈C语言实现

    #ifndef LINKSTACK_H_INCLUDED #define LINKSTACK_H_INCLUDED #include <stdlib.h> #include <std ...

  4. ES6 方法函数

    1.模块的整体加载 除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面. 下面是一个circle.js文件,它输出两个方法area和circumfe ...

  5. windows环境安装nexus

    1.下载安装nexus安装包,我用的是nexus-2.14.13-01版本 2. 以管理员身份打开cmd命令窗口 3.进入到nexus bin目录下 输入命令 nexus install 4. 启动 ...

  6. loadrunner事务判断常用方法

    //判断关联到的字符串是否为空 if (strlen(lr_eval_string("{param}")) == 0); //判断关联的字符串是否跟期望的值相同 if(strcmp ...

  7. App架构设计:接口的设计

    安全机制的设计 现在,大部分App的接口都采用RESTful架构,RESTFul最重要的一个设计原则就是,客户端与服务器的交互在请求之间是无状态的,也就是说,当涉及到用户状态时,每次请求都要带上身份验 ...

  8. java自定义classloader引发的思考

    引用 java类的热替换 classloader机制 如下图所示,java的classloader是双亲委派机制.会首先从父classloader加载指定的class,如果加载不到才会从子classl ...

  9. 数据科学中的R和Python: 30个免费数据资源网站

    1 政府数据 Data.gov:这是美国政府收集的数据资源.声称有多达40万个数据集,包括了原始数据和地理空间格式数据.使用这些数据集需要注意的是:你要进行必要的清理工作,因为许多数据是字符型的或是有 ...

  10. java:struts框架3(自定义拦截器,token令牌,文件上传和下载(单/多))

    1.自定义拦截器: struts.xml: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ...