1、CSS3动画以及animation事件的定义

animation :name duration timing-function delay iteration-count direction

animation-name:动画名称　　　　animation-name：keyframename|none(keyframename:自定义名字 none:动画无效果)

animation-duration:动画执行时间   animation-duration:time(time:秒/毫秒)

animation-timing-function:动画速度曲线

【

animation-timing-function：value;

linnear:规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）

ease:规定以慢速开始的过渡效果（等于 cubic-bezier(0.25,0.1,0.25,1)）

ease-in:规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）

ease-out:规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）

ease-in-out:规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）

cubic-bezier(n,n,n,n):在cubic-bezier函数中定义自己的值，可能的数值在0~1之间

steps(n):阶跃函数

】

animation-delay:动画效果延迟时间　　animation-delay:time(time:秒/毫秒)

animation-iteration-count:动画执行次数　　animation-iteration-count:n|infinite（n:具体次数 、infinite：无限重复）

animation-direction:动画执行方向　　　animation-direction：normal|alternate(normal:动画顺序播放、alternate:动画轮流反向播放)

animation-play-state:动画执行状态   　　animation-play-state:pause | running(paused:暂停动画、running:运行动画)

animation-fill-mode:动画执行过程效果是否可见　

【

animation-fill-mode:none | forwards | backwards | both (none:不改变[默认值]、forwards：当动画完成后，保持最后一个属性值[在最后一个关键帧中定义]) 、backwords:在animation所指定的一段时间内，在动画显示前，应运开始属性值（在第一个关键帧中定义）、both:向前后相后填充模式都被应用

】

@keyframes:规定动画

@keyframes animationname {keyframes-selector{css-styles;}}

【

keyframes-selector :动画时长百分比

0~100%

from(与0%相同)

to(与100%相同)

可以只有一个to

css-styles:一个或者多个合法的css样式属性

】

动画事件：

动画开始：obj.addEventListener("webkitAnimationStart",fn);//Chrome浏览器兼容模式

　　　　　obj.addEventListener("animationstart",fn);//其他兼容浏览器

动画执行过程中触发：

　　　　　obj.addEventListener("webkitAnimationIteration",fn);

　　　　　obj.addEventListener("animationIteration",fn);

动画结束后触发：

　　　　　obj.addEventListener("webkitAnimationEnd",fn);

　　　　　obj.addEventListener("animationEnd",fn);

2、CSS3动画以及animation事件应用示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation事件</title>
<style>
*{
margin:0;
padding: 0;
}
div{
width: 100px;
height: 300px;
background: #666;
animation: anim 2s 1s linear 3 alternate forwards ;/*第一个time是动画改变的1时间，第二个是开始之前的延时*/
}
@keyframes anim {
0%{width: 50px;}
100%{width: 300px;}
}
</style>
</head>
<body>
<div id="div"></div>
<script>
var oDiv = document.getElementById("div");
oDiv.addEventListener("webkitAnimationStart",start);
oDiv.addEventListener("animationStart",start);
oDiv.addEventListener("webkitAnimationIteration",iteration);
oDiv.addEventListener("animationIteration",iteration);
oDiv.addEventListener("webkitAnimationEnd",end);
oDiv.addEventListener("animationEnd",end);
function start() {
oDiv.style.background = "red";
}
function iteration() {
oDiv.style.background = "green";
}
function end() {
oDiv.style.background = "blue";
}
</script>
</body>
</html>

3、示例效果图

示例源码：animation事件.zip

转载请注明出处，谢谢您的合作！

CSS3动画以及animation事件的更多相关文章

  1. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

  2. 学习CSS3动画（animation）

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  3. CSS3 动画实现 animation 和 transition 比较

    在 CSS3 中有两种方式实现动画, 分别是 animation 和 transition, 他们都有以下功能 根据特定 CSS 属性进行动画 设定属性变化的 timing function 设定动画 ...

  4. css3动画transition animation

    CSS动画简介  transition   animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...

  5. 【WEB前端系列之CSS】CSS3动画之Animation

    前言 动画使用示例https://github.com/AndyFlower/web-front/tree/master/css3/loading 学习CSS3中Animation之前先来看一个动画特 ...

  6. css3动画（animation）效果3-正方体合成

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

  7. CSS3动画属性animation的基本用法

    CSS3新增了一个令人心动的属性:animation,尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽,但是从代码量和浏览器性能上有着明显的优点. ani ...

  8. css3动画（animation）效果1-漂浮的白云

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

  9. css3动画：animation

    例: -webkit-animation: myfirst 5s linear 2s infinite alternate; animation: myfirst 5s linear 2s infin ...

随机推荐

  1. redis新手入门，摸不着头脑可以看看<一>

    公司在用redis,但我并不会.所以需求就来了.. redis的好处坏处自己百度就好我也不去复制黏贴了. ----------------------------------------------- ...

  2. MySQL复制同一个服务器的表结构和表数据

    例如,现在服务器上有数据库 dbx 和 dby,dbx中有很多表,要把dbx中的表全部复制到dby,如下操作: 首先: use dby; [复制表结构] CREATE TABLE user LIKE ...

  3. tensorflow import 没找到cudnn库问题解决

    ImportError: libcudnn.so.5: cannot open shared object file: No such file or directory 将cuda下lib64中的l ...

  4. 修改maven项目jdk版本,并解决Dynamic Web Module 3.1 requires Java 1.7 or newer错误

    使用maven的时候,默认会使用1.5版本的JDK,并且创建项目时也会是1.5版本. 但是我想用JDK1.7版本,所以我手动将maven项目JDK改为1.7版本. 手动修改JDK版本为1.7以后,项目 ...

  5. 54.1 怎样才算学会django？ 知道这28个知识点才算会django2

    学到什么程度才算会django了?这篇文章帮你梳理一下 关于django2的28个不可不知的知识点总结: 1.cookie操作: -客户端本地存储的键值对 2.session操作: -服务器端可以保存 ...

  6. 老男孩Python全栈开发（92天全）视频教程 自学笔记09

    day9课程内容: 乌班图(ubuntu)64位系统 和 VMware 虚拟机安装(官网收费又麻烦,在网上找资源 安装vmware: vm运行(秘钥找度娘)--文件--新建虚拟机--自定义 下一步-- ...

  7. selenium+chrome抓取淘宝搜索抓娃娃关键页面

    最近迷上了抓娃娃,去富国海底世界抓了不少,完全停不下来,还下各种抓娃娃的软件,梦想着有一天买个抓娃娃的机器存家里~.~ 今天顺便抓了下马爸爸家抓娃娃机器的信息,晚辈只是觉得翻得手酸,本来100页的数据 ...

  8. UVA - 11624 多点bfs [kuangbin带你飞]专题一

    题意:某人身陷火场,总有k个点着火,着火点可向四周扩散,问此人能否逃离. 思路:可能有多个着火点,以这些着火点作为起点进行bfs,得到整个火场的最短距离,然后又以人所在坐标作为起点进行bfs,得到该人 ...

  9. Redis实现数据库读写分离

    Redis简介 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发工作 ...

  10. .net mvc web api 返回 json 内容时过滤值为null的属性

    1.响应内容(过滤前) {"msg":"初始化成功!","code":"","success":tr ...