在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。前面我们在使用transition制作一个简单的transition效果时,我们包括了初始属性和最终属性,一个开始执行动作时间和一个延续动作时间以及动作的变换速率,其实这些值都是一个中间值,如果我们要控制的更细一些,比如说我要第一个时间段执行什么动作,第二个时间段执行什么动作(换到flash中说,就是第一帧我要执行什么动作,第二帧我要执行什么动作),这样我们用Transition就很难实现了,此时我们也需要这样的一个“关键帧”来控制。那么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。

Keyframes具有其自己的语法规则,他的命名是由"@keyframes"开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样式规则,有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的,如“0%”到"100%"之间,我们可以在这个规则中创建多个百分比,我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性,从而让元素达到一种在不断变化的效果,比如说移动,改变元素颜色,位置,大小,形状等,不过有一点需要注意的是,我们可以使用“fromt”“to”来代表一个动画是从哪开始,到哪结束,也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是,其中"0%"不能像别的属性取值一样把百分比符号省略,我们在这里必须加上百分符号(“%”)如果没有加上的话,我们这个keyframes是无效的,不起任何作用。因为keyframes的单位只接受百分比值。

Keyframes可以指定任何顺序排列来决定Animation动画变化的关键位置。其具体语法规则如下:

 keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';
keyframes-blocks: [ keyframe-selectors block ]* ;
keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;

keyframes实例:

@-webkit-keyframes 'wobble' {
0% {
margin-left: 100px;
background: green;
}
40% {
margin-left: 150px;
background: orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}

animation主要有以下几种:animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。

一、animation-name:

语法:

  animation-name: none | IDENT[,none | IDENT]*;

取值说明:

animation-name:是用来定义一个动画的名称

二、animation-duration:

语法:

  animation-duration: <time>[,<time>]*

取值说明:

animation-duration是用来指定元素播放动画所持续的时间长

三、animation-timing-function:

语法:

   animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]* 

取值说明:

animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式

四、animation-delay:

语法:

  animation-delay: <time>[,<time>]*

取值说明:

animation-delay:是用来指定元素动画开始时间。

五、animation-iteration-count

语法:

  animation-iteration-count:infinite | <number> [, infinite | <number>]* 

取值说明:

animation-iteration-count是用来指定元素播放动画的循环次数

六、animation-direction

语法:

  animation-direction: normal | alternate [, normal | alternate]*

取值说明:

animation-direction是用来指定元素动画播放的方向

七、animation-play-state

语法:

   animation-play-state:running | paused [, running | paused]* 

取值说明:

animation-play-state主要是用来控制元素动画的播放状态。

参考链接:http://www.w3cplus.com/content/css3-animation

css3 animation(动画)笔记的更多相关文章

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

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

  2. css3 animation动画技巧

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

  3. CSS3 animation动画

    CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...

  4. CSS3 animation 动画

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

  5. css3 animation 动画属性简介

    animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...

  6. CSS3 Animation学习笔记

    Internet Explorer 9,以及更早的版本, 不支持 @keyframe 规则或 animation 属性. Internet Explorer 10.Firefox 以及 Opera 支 ...

  7. css3 animation动画事件

    当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart  //动画開始 An ...

  8. CSS3 animation动画,循环间的延时执行时间

    如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{ webkit-animation ...

  9. css3 animation动画使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Asp.net MVC4 记录在线用户数及登录时长

    Global.asax.cs文件 public class MvcApplication : System.Web.HttpApplication { /// <summary> /// ...

  2. Android事件分发机制浅析(2)

    本文来自网易云社区 作者:孙有军 上面的两次执行中每次都调用了onInterceptTouchEvent事件,这个到底又是啥?我们去看看他的返回值是什么? public boolean onInter ...

  3. Socket编程概念

    一.网路套接字 在通信过程中,套接字是成对存在的,该套接字内部借助两个缓冲区实现 二.网络字序 1.存储方式 大端法(网络):高位存低位,低位存高位 小端法(本地):高位存高位,低位存低位 2.网络字 ...

  4. 【ocp新题】OCP 12c 062认证考试出现大量新题-8

    8. Which are two ways for a database service to be recognized by a listener in Oracle Database 12c? ...

  5. nodejs之模块加载机制

    nodejs模块加载原理 node加载模块步骤: 1) 路径分析 (如判断是不是核心模块.是绝对路径还是相对路径等) 2) 文件定位 (文件扩展名分析, 目录和包处理等细节) 3) 编译执行 原生模块 ...

  6. 导入不用的css文件及在不同设备显示不用的html页面

    当一个页面对应有多个css样式文件时,我们可以根据地址栏的参数值而导入不同的css文件: function getCss() { var linkNode = document.createEleme ...

  7. Vim编辑器与shell脚本

      目录                                                          Vim文本编辑器 Shell脚本 Shell编程变量 流程控制语句 计划任务 ...

  8. 【PaddlePaddle系列】CIFAR-10图像分类

    前言 本文与前文对手写数字识别分类基本类似的,同样图像作为输入,类别作为输出.这里不同的是,不仅仅是使用简单的卷积神经网络加上全连接层的模型.卷积神经网络大火以来,发展出来许多经典的卷积神经网络模型, ...

  9. (转)MySQL 加锁处理分析

    MySQL 加锁处理分析 原文:http://hedengcheng.com/?p=771 1    背景    1 1.1    MVCC:Snapshot Read vs Current Read ...

  10. (转)MySQL日志管理

    MySQL 服务器上一共有六种日志:错误日志,查询日志,慢查询日志,二进制日志,事务日志,中继日志. 原文:https://segmentfault.com/a/1190000003072237 一 ...