先解决上一篇的遗留问题。 

div {
width: 300px;
height: 200px;
background-color: red;
-webkit-animation: test1 2s;
}
@-webkit-keyframes test1 {
from {background-color: green;}
to {background-color: red;}
}

  这样定义的动画,实际情况是只跑一次,无论鼠标悬浮还是移出都不会再次启动动画。

  why?因为transition和animation的工作模式是不同的,transition可以理解为监听器,一旦触发即启动。而animation则可以理解为命令,当时有效,执行完后作废,除非再下命令。

  那这样是否有效呢?

div {
width: 300px;
height: 200px;
background-color: red;
-webkit-animation: test1 2s;
}
div:hover {
-webkit-animation: test1 2s;
}
@-webkit-keyframes test1 {
from {background-color: green;}
to {background-color: red;}
}

  结果还是无效,但是

div {
width: 300px;
height: 200px;
background-color: red;
-webkit-animation: test1 2s;
}
div:hover {
-webkit-animation: test2 2s;
}
@-webkit-keyframes test1 {
from {background-color: green;}
to {background-color: red;}
}
@-webkit-keyframes test2 {
from {background-color: green;}
to {background-color: red;}
}

  这样就有效了。

  上面两个例子的区别说明了:

  1. animation执行完后不是作废了,而是处于end的状态
  2. 状态跟随animation-name,只有animation-name改变时,状态才初始化

  好了,弄清楚了animation和transition最核心的区别,然后来看animation中的所有属性。用上一篇的代码作为初始代码:

div {
width: 300px;
height: 200px;
background-color: red;
-webkit-animation: test1 2s forwards;
}
div:hover {
-webkit-animation: test2 2s forwards;
}
@-webkit-keyframes test1 {
from {background-color: green;}
to {background-color: red;}
}
@-webkit-keyframes test2 {
from {background-color: red;}
to {background-color: green;}
}

  animation同样是很多属性的缩写:

  1. animation-name: 对应keyframes的name,keyframes的定义遵循 percentage {css property...},其中from为0%,to为100%

    div {
    width: 300px;
    height: 200px;
    background-color: red;
    -webkit-animation: test1 2s forwards;
    }
    div:hover {
    -webkit-animation: test2 2s forwards;
    }
    @-webkit-keyframes test1 {
    from {background-color: green; width: 500px;}
    to {background-color: red; width: 300px;}
    }
    @-webkit-keyframes test2 {
    from {background-color: red; width: 300px;}
    to {background-color: green; width: 500px;}
    }

      与transition表现不同的是,当动画进行的中途改变鼠标悬浮/移出的状态时,元素会先切换到最终的状态也就是新动画初始的状态再执行新动画。而不像transition一样平滑以当前的状态作为开始状态执行新动画。这是因为animation与元素当前的状态毫无关联,只按照keyframes的定义执行动画,而transition只以状态的改变触发的,所以跟元素当前的状态关联密切。

  2. animation-duration: 动画执行的时间。
  3. animation-timing-function: 动画执行的方式。
  4. animation-delay: 动画延迟执行的时间。
    以上三个同transition,可以看出两者的设计思想是类似的,但animation无疑更复杂,因为它还有
  5. animation-iteration-count: number | infinite 动画执行的次数n,当然总时间就是animation-durationn * n了
    div {
    width: 300px;
    height: 200px;
    background-color: red;
    -webkit-animation: test1 2s forwards 2;
    }
    div:hover {
    -webkit-animation: test2 2s forwards 2;
    }
    @-webkit-keyframes test1 {
    from {background-color: green;}
    to {background-color: red;}
    }
    @-webkit-keyframes test2 {
    from {background-color: red;}
    to {background-color: green;}
    }

    页面加载时元素由绿慢慢变红,然后立即变绿,最后再次慢慢由绿变红,动画进行了两次,但立即变绿很不平滑。这就要看下面这个属性

  6. animation-direction: normal(default) / alternate: 当执行次数为偶数时,反转关键帧进行动画
    div {
    width: 300px;
    height: 200px;
    background-color: red;
    -webkit-animation: test1 2s forwards 3 alternate;
    }
    div:hover {
    -webkit-animation: test2 2s forwards 3 alternate;
    }
    @-webkit-keyframes test1 {
    from {background-color: green;}
    to {background-color: red;}
    }
    @-webkit-keyframes test2 {
    from {background-color: red;}
    to {background-color: green;}
    }

    元素由绿慢慢变红,然后由红慢慢变绿,最后由绿慢慢变红,动画进行了三次,而且都很平滑。

  7. animation-fill-mode: 定义动画启动前的delay时间内,和动画完成后的时间内元素的CSS属性。none(default) delay时间内和完成后都使用元素本来的样式,与keyframes毫无关联 | forwards delay时间内使用本来的样式,完成后使用最后一帧的样式 | backwards delay时使用第一帧的样式,完成后使用本来的样式 | both delay时间内和完成后分别使用第一帧和最后一帧的样式
    div {
    width: 300px;
    height: 200px;
    background-color: red;
    /* 将none分别替换成forwards、backwards、both */
    -webkit-animation: test1 2s 2s none;
    }
    @-webkit-keyframes test1 {
    from {background-color: blue;}
    to {background-color: black;}
    }
  8. animation-play-state: 规定动画暂停或运行 running(default) | paused 暂停动画。比如先定义动画,然后想在鼠标悬浮的时候再执行。
    div {
    width: 300px;
    height: 200px;
    background-color: red;
    -webkit-animation: test1 2s forwards paused;
    }
    div:hover {
    -webkit-animation-play-state: running;
    }
    @-webkit-keyframes test1 {
    from {background-color: red;}
    to {background-color: green;}
    }

  还有,animation emit的事件比transition多一个。

  总共有三个事件:

  1. animationstart: 动画正式开始,要等delay的时间过去
  2. animationend: 动画正式结束,所有animation-iteration-count执行结束
  3. animationiteration: 动画重新播放时

  这三个事件没有被浏览器支持,取而代之是webkit下的webkitAnimationStart、webkitAnimationEnd、webkitAnimationEnd(注意大写字母)。简单的实现如下:

(function setup() {
var e = document.getElementsByTagName("div")[0];
e.addEventListener("webkitAnimationStart", listener, false);
e.addEventListener("webkitAnimationEnd", listener, false);
e.addEventListener("webkitAnimationIteration", listener, false);
})();
function listener(e) {
var l = document.createElement("li");
switch(e.type) {
case "animationstart":
case "webkitAnimationStart":
console.log("animation start");
break;
case "animationend":
case "webkitAnimationEnd":
console.log("animation end");
break;
case "animationiteration":
case "webkitAnimationIteration":
console.log("animation restart");
break;
}
}

  以上。

CSS3动画效果之animation的更多相关文章

  1. 鼠标悬停css3动画效果

    下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  2. CSS自学笔记(14):CSS3动画效果

    在CSS3中也新增了一些能够对元素创建动画处理的属性.通过这些新增的属性,我们可以实现元素从一种样式变换成另一种样式时为元素添加动态效果,我们就可以取代网页中的动态图片.flash动画和JavaScr ...

  3. 第八十三节,CSS3动画效果

    CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一.动画简介     CSS3提 ...

  4. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  5. 35个让人惊讶的CSS3动画效果

    1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column 5. Slick jQuery  ...

  6. Css3动画效果,彩色文字效果,超简单的loveHeart

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...

  7. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  8. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  9. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

随机推荐

  1. ABP+AdminLTE+Bootstrap Table权限管理系统第四节--仓储,服务,服务接口及依赖注入

    在ABP框架中,仓储,服务,这块算是最为重要一块之一了.ABP框架提供了创建和组装模块的基础,一个模块能够依赖于另一个模块,一个程序集可看成一个模块, 一个模块可以通过一个类来定义这个模块,而给定义这 ...

  2. NYOJ--113--字符串替换

    /* Name: NYOJ--113--字符串替换 Author: shen_渊 Date: 18/04/17 15:41 Description: 字符串水题,秒过 */ #include<b ...

  3. 七月SSL行业新闻回顾

    大事件一:被泄露的私钥和基于假私钥进行的撤回 上个月,我们报告说Spotify和Cisco在应用程序中捆绑了有效证书的私钥.这些证书将根据基准要求被撤销,但应用程序不是泄露私钥的唯一来源.Koen R ...

  4. Markdown常用编辑器

    插入图片功能对比 Cmd Markdown只支持通过输入图片在线URL的方式来插入图片,不能上传本地图片. CSDN Markdown.MarkdownPad既支持插入本地图片,也支持插入网上在线图片 ...

  5. python超简单的web服务器

    今天无意google时看见,心里突然想说,python做web服务器,用不用这么简单啊,看来是我大惊小怪了. web1.py   1 2 3 #!/usr/bin/python import Simp ...

  6. python自动化运维四:nmap端口扫描

    p { margin-bottom: 0.25cm; line-height: 120% } a:link { } 端口扫描器: Python的第三方模块python-nmap可以实现高效的端口扫描. ...

  7. Codeforces Round #428 (Div. 2) 题解

    题目链接:http://codeforces.com/contest/839 A. Arya and Bran 题意:每天给你一点糖果,如果大于8个,就只能给8个,剩下的可以存起来,小于8个就可以全部 ...

  8. css中所有的选择器

    认识css中所有的选择器 什么是选择器 每一条样式申明(定义)由两部分组成 选择器{ 样式:    } 标签选择器 p{ font-size:12px:  line-height:1.6em;     ...

  9. UI设计|PS软件操作应用——GIF动图

      前  言 JRedu 在之前的分享中,跟大家主要讲解了PS软件工具的基本操作,对主要的图层.蒙版.通道和滤镜都有一些介绍,希望对大家有所帮助,在介绍这些工具时也提到过GIF,而在本次分享中就跟大家 ...

  10. Git 默认不区分大小写

    背景: 通过代码规范,修改了包名为全小写(修改了文件夹目录),但发现push后,git服务器的文件夹目录还是为大写 解决方法: git默认是不区分大小写的,意思是你修改一个文件名/文件夹的时候,git ...