@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. docker简单理解

    Docker是开源的一个基于轻量级虚拟化技术的容器引擎项目.它通过分层镜像标准化和内核虚拟化技术,使得应用开发者和运维工程师可以以统一的方式跨平台发布应用,并且以几乎没有额外开销的情况下提供资源隔离的 ...

  2. js中数组的经典特性

    数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长 ...

  3. 为Windows编译libobjc2(通过交叉编译的方式)

    前提:Linux系统.git.clang-8.g++-mingw-w64-x86-64.gobjc++-mingw-w64-x86-64. 一.下载源代码 git clone https://gith ...

  4. 一、基础篇--1.1Java基础-Session和Cookie的区别【转】

    https://www.cnblogs.com/zlw-xf/p/8001383.html 1:cookie数据存放在客户的浏览器上(客户端),session数据放 @1:cookie不是很安全,别人 ...

  5. leetcode 137单词接龙

    直接层序遍历,结果有部分测试样例超时: class Solution { public: int ladderLength(string beginWord, string endWord, vect ...

  6. 浏览器端-W3School-JavaScript:JavaScript Math 对象

    ylbtech-浏览器端-W3School-JavaScript:JavaScript Math 对象 1.返回顶部 1. Math 对象 Math 对象用于执行数学任务. 使用 Math 的属性和方 ...

  7. 【python3】configparser读取ini配置文件

    在应用过程中,发现下面这个问题: cf=configparser.ConfigParser()读取配置文件时,如果数据包含%这们析特殊符号,就会报出上面的错误,使用cf = configparser. ...

  8. sorted&filter&map

    python里列表的sort和内置的sorted函数,都可以进行排序,列表的sort方法是在原有的列表上进行排序,sorted是会返回一个新的对象 persons = [ {'name': '小明', ...

  9. Struts---多文件上传、单文件下载

    struts.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUB ...

  10. C#打开文件

    C#中经常用到的功能,打开文件: /// <summary> /// 打开文件,可选择多个文件 /// </summary> /// <param name=" ...