CSS3动画效果之transition
CSS3中有两种方式实现动画，transition和animation+@keyframe。
两者的作用机制不一样：transition定义在可能要进行动画的元素上，对某些CSS属性进行监听，一旦CSS改变则进行动画；animation定义在马上要进行动画的元素上，一旦定义动画即进行。
比如当鼠标悬浮的时候，某元素由红色改为绿色。使用transition和animation实现的共同代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 300px;
height: 200px;
background-color: red;
/*不同的代码*/
}
div:hover {
/*不同的代码*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
使用transition的代码量更少，简介直观。
div {
width: 300px;
height: 200px;
background-color: red;
transition: background-color 2s;
}
div:hover {
background-color: green;
}
其中transition可作为监听器，监听background-color的改变，一旦改变则之前的值作为初始状态，后来的值作为终止状态，进行整个过渡动画。
使用animation先要定义各种时间段的状态，这里只需要定义开始时间和结束时间，这个定义放在@keyframes中，anmation再调用这个keyframes。
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;}
}
这里定义了两套动画和关键帧，一套应用于普通状态，一套应用于鼠标悬浮状态。而且开始状态的CSS和元素之前的CSS没关系，需要重新定义。更需要注意的是，animation的表现和transition有一点不同，在页面加载后会先执行普通状态下的动画一次。乍看一下，似乎animation完全不如transition好用，对于这个简单的需求确实如此，但animation可以应付一些更复杂的需求。
以下先从简单的开始，也就是transition。
transition的意思不是动画，而是过渡，从一个状态过渡到另一个状态。这意味着这个动画的执行包含三个要素，初始状态、过渡、终止状态。简单的结构意味着简单的实现和受限制的功能。transiton只包含四个属性：
- transition-property: 要监听的CSS属性，如果有多个属性，用逗号分隔，且不能用transition简写。
- transition-duration: 动画执行的时间。
- transition-timing-function: 动画执行的方式。linear（匀速） | ease（先快后慢，默认值） | ease-in（先慢后快） | ease-out（先快后慢） | ease-in-out（先慢中快后慢） | cubic-bezier(n, n, n, n) （贝塞尔曲线）
- transition-delay: 动画延迟执行的时间。
首先用transition-property监听多个属性，代码如下：
div {
width: 300px;
height: 200px;
background-color: red;
transition-property: background-color, width;
transition-duration: 2s;
}
div:hover {
background: green;
width: 500px;
}
如果想移出鼠标不要立即执行动画，而是等0.5秒，则代码如下：
div {
width: 300px;
height: 200px;
background-color: red;
transition-property: background-color, width;
transition-duration: 2s;
transition-delay: .5s;
}
div:hover {
background: green;
width: 500px;
transition-delay:;
}
transition-delay需要定义在普通状态下的CSS中，因为移开鼠标后div立即恢复到普通状态，读取的是普通状态下的CSS属性。另外普通状态下的CSS属性会应用到hover状态下，导致鼠标悬浮的动画也延迟了0.5s，所以要在hover状态下将此属性定义为0。
可以看出，悬浮鼠标和移出鼠标都会执行动画是因为定义在div中的transition-property和transition-duration同样作用在了div:hover中，所以可以定义transition: none移除某一阶段的动画。比如：
div {
width: 300px;
height: 200px;
background-color: red;
transition-property: background-color, width;
transition-duration: 2s;
}
div:hover {
background: green;
width: 500px;
transition-property: none;
}
上面移除了悬浮鼠标的动画效果。
可见，定义在元素上的transition是可以作用于其伪类的，并在伪类状态下再度运行动画，那么animation是不是一样呢，比如：
div {
width: 300px;
height: 200px;
background-color: red;
-webkit-animation: test1 2s forwards;
}
@-webkit-keyframes test1 {
from {background-color: green;}
to {background-color: red;}
}
鼠标悬浮时是否会执行动画？还有，如果涉及到几个属性的变化时，属性1的动画设置为2s，属性2的动画设置为3s，使用transition能不能实现呢？
下一篇animation将会解释其不同的工作方式。
CSS3动画效果之transition的更多相关文章
- CSS3 动画效果带来的bug
css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...
- 第八十三节，CSS3动画效果
CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一．动画简介 CSS3提 ...
- CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- animate.css 一些常用的CSS3动画效果
大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...
- CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码
CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...
- 鼠标悬停css3动画效果
下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 35个让人惊讶的CSS3动画效果
1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column 5. Slick jQuery ...
- Css3动画效果,彩色文字效果,超简单的loveHeart
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...
随机推荐
- 如何恢复未释放租约的HDFS文件
之前有文章介绍过HDFS租约带来的问题,导致spark应用无法正常读取文件,只能将异常文件找出并且删除后,任务才能继续执行. 但是删除文件实在是下下策,而且文件本身其实并未损坏,只是因为已经close ...
- knockoutjs模板实现树形结构列表
数据结构 /*数据*/ var ko_vue_data=[ { name: "总能耗", number:"0", energyone: 14410, energ ...
- 如何快速高效地完成一个Android项目？
本文的内容有别于之前文章中纯技术的探讨,会从业务逻辑.技术.团队和方法论的角度探讨如何快速高效地完成一个Android项目.当然,快速高效是有前提的,第一,本文依然是从研发的角度来谈如何把控项目的,而 ...
- 有關於USB保固
================================================= 版權聲明:如需轉載,請列明出處:HingAglaiaWong@博客園 支持原創,是對作者最好的的鼓勵 ...
- Jenkins安装与配置
Jenkins安装与配置 2 Jenkins安装 在最简单的情况下,Jenkins 只需要两个步骤: 1.下载最新的版本(一个 WAR 文件).Jenkins官方网址: http://Jenkins- ...
- html5 mdn一些精彩的案例
https://developer.mozilla.org/zh_CN/docs/Games/Examples
- 利用CSS简单布局的不同组合类型
关于CSS布局页面的简单组合方式: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- iconfont 使用
阿里巴巴适量图库 http://www.iconfont.cn/ 官方帮助中有非常详细的操作指导 http://www.iconfont.cn/help/detail?spm=a313x.77810 ...
- 神器Vim之命令介绍
前天晚上看casa直播项目的组件化,不仅了解了如何快速对现有项目进行组件化,以及进一步不断迭代,实现完全组件化的过程:同时,也被casa的vim技能的熟练程度所震撼.早就听说,vim是unix系统上文 ...
- 采用SmartQQ 协议可制作聊天机器人
采用.NET CORE可运行在 Linux . Windows 和 Mac OSX 平台下. SmartQQ可以: 收发文字消息 获取好友.群.讨论组.好友分组和最近会话的列表 SmartQQ不可以: ...