@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. SpringBoot导入导出Excel到Mysql

    2018.11.11 10:44:52字数 96阅读 1320 一.包的引用 除了引用SpringBoot基本包之外,还需要引入对Excel操作的包,如下: <dependency> &l ...

  2. C++入门经典-例2.5-使用附加格式说明scanf函数的格式输入

    1:代码如下: // 2.5.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" int main() { long iLong; /*长整型变 ...

  3. 在 Android 中如何调用 C 语言?

    当我们的 Java 需要调用 C 语言的时候可以通过 JNI 的方式,Java Native Interface.Android 提供了对 JNI 的支持, 因此我们在 Android 中可以使用 J ...

  4. Oracle中生成随机数的函数

    在Oracle中的DBMS_RANDOM程序包中封装了一些生成随机数和随机字符串的函数,其中常用的有以下两个: DBMS_RANDOM.VALUE函数 该函数用来产生一个随机数,有两种用法: 1. 产 ...

  5. linux(centOS7)的基本操作(五) 磁盘、分区、挂载、卸载

    linux的磁盘类型和分区简介 linux的磁盘分为IDE和SCSI,目前以后者居多. 1. IDE磁盘的分区:hd+盘号+分区数字 盘号 |-a:基本盘 |-b:基本从属盘 |-c:辅助主盘 |-d ...

  6. Jmeter之乱码 (一)

    Jmeter历史版本下载: http://archive.apache.org/dist/jmeter/binaries/ Jmeter3.0接口测试脚本POST请求主体中的中文无法正确显示,现象如下 ...

  7. Cocos2d-X多线程(1) 在cocos2d-x中使用多线程

    教科书上说:进程是资源分配的最小单位,线程是CPU调度的最小单位. 进程是程序在计算机上的一次执行活动.直观的讲就是会产生一个pid. int main() {     //业务逻辑代码     re ...

  8. Angular5 *ngIf 和 hidden 的区别

    问题 项目中遇到一个问题,有一个过滤查询的面板,需要通过一个展开折叠的button,来控制它的show 和 hide.这个面板中,有一个Select 组件,一个 input 查询输入框. 原来代码是: ...

  9. 执行python程序 出现三部曲

    1.执行一个python程序 ,会产生一个进程 ,然后会在内存生成一份内存空间 先把python解释器代码加载到内存里, python解释器代码就是C语言代码 2. 然后再把 自己写的python文件 ...

  10. 第j九周学习总结暨第七周实验报告

    完成火车站售票程序的模拟. 要求: (1)总票数1000张: (2)10个窗口同时开始卖票: (3)卖票过程延时1秒钟: (4)不能出现一票多卖或卖出负数号票的情况. 一:实验代码 package d ...