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. 调试 smallcorgi/Faster-RCNN_TF 的demo过程遇到的问题

    最近在调试faster R-CNN时,遇到了各种各样的问题.使用的算法库为https://github.com/smallcorgi/Faster-RCNN_TF 注:本文使用的是通过virtuale ...

  2. MySQL中order by排序时，数据存在null咋办

    order by排序是最常用的功能,但是排序有时会遇到数据为空null的情况,这样排序就会乱了,这里以MySQL为例,记录我遇到的问题和解决思路. 问题: 网页要实现table的行鼠标拖拽排序,我用A ...

  3. Java中InputStream装饰器模式的大家族

    本文写在po主初学JAVA时,在学习inputStream摸不着头脑,受Java IO-InputStream家族 -装饰者模式一文启发,所以在理清思路时写下本文.因为初学,如有错误,望指正. 因为和 ...

  4. C/C++语言简介之优缺点

    一.优点1.简洁紧凑.灵活方便 C语言一共只有32个关键字,9种控制语句,程序书写形式自由,区分大小写.把高级语言的基本结构和语句与低级语言的实用性结合起来.C 语言可以像汇编语言一样对位.字节和地址 ...

  5. Shiro 核心功能案例讲解 基于SpringBoot 有源码

    Shiro 核心功能案例讲解 基于SpringBoot 有源码 从实战中学习Shiro的用法.本章使用SpringBoot快速搭建项目.整合SiteMesh框架布局页面.整合Shiro框架实现用身份认 ...

  6. C++ 11 左值，右值，左值引用，右值引用，std::move, std::foward

    这篇文章要介绍的内容和标题一致,关于C++ 11中的这几个特性网上介绍的文章很多,看了一些之后想把几个比较关键的点总结记录一下,文章比较长.给出了很多代码示例,都是编译运行测试过的,希望能用这些帮助理 ...

  7. w !sudo tee %

    w !sudo tee % 该命令可用于保存有权限的写文件

  8. Angular：利用内容投射向组件输入ngForOf模板

    现在,我们写一个组件puppiesListCmp,用于显示小狗狗的列表: //puppies-list.component.ts @Component({ selector: 'puppies-lis ...

  9. # C# 如何调用动态连接库？

    导入命名空间 using System.Runtime.InteropServices; 把 非托管DLL放入执行程序同级目录,比如 Debug .Release . [DllImport(" ...

  10. OpenCV 之 空间滤波

    1  空间滤波 1.1  基本概念 空间域,在图像处理中,指的是像平面本身: 空间滤波,则是在像平面内,对像素值所进行的滤波处理. 如上图所示,假设点 (x, y) 为图像 f 中的任意点,中间正方形 ...