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 ...
随机推荐
- 种下一棵树：有旋Treap
第一个平衡树板子,有旋Treap.用随机函数规定一个堆,维护点权的同时维护堆的性质,可以有效地避免退化成链.按我的理解,建立一棵二叉排序树,树的形态会和给出节点的顺序有关.按照出题人很机智定理,数据肯 ...
- git入门（3）git checkout 和git branch分支的创建和删除
在一个项目中,需要多人同时开发,协同coding 要求: 开发时请用开发分支daily/0.0.1, 禁止直接使用master分支开发新建分支 git checkout -b daily/0.0.1 ...
- Hibernate三大类查询总结
Hibernate目前总共分为三大类查询:cretiria,hql,本地sql [以下篇章搜集于网络,感谢作者] 第一:关于cretiria的查询 具有一个直观的.可扩展的条件查询API是Hibern ...
- 给定一个无序数组arr，求出需要排序的最短子数组长度。例如： arr = [1，5，3，4，2，6，7] 返回4，因为只有[5，3，4，2]需要排序。
思路 首先从左往右遍历,然后设定一个Max,如果遍历的过程中array[i]大于Max,则置换Max,若小于Max,则指定 k 记录该位置. 然后再从右往左遍历,设定一个Min,在遍历的过程中arra ...
- hdu--1316--How Many Fibs?(java大数)
How Many Fibs? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- MacOS下安装gdb、mgo
安装gdb:http://blog.panks.me/posts/2013/11/install-gdb-on-os-x-mavericks-from-source/ 注意最后两步: killall ...
- Android service 服务的应用之电话监听器以及短信监听器
首先建立一个项目工程文件,如下图所示:
- Eclipse创建Maven项目报错的解决
报错1:Could not resolve archetype org.apache.maven.archetypes:maven-archetype-quickstart 起因:删除一个用quick ...
- jQuery.Gantt
使用jQuery.Gantt过程中,遇到的问题!
- 【问题解决记录】Error: Cannot find module '@ionic/app-scripts'
主要问题为: ionic serve 编译在浏览器中预览项目时,提示报错 Error: Cannot find module '@ionic/app-scripts'.这个问题的主要现象就是创建的项目 ...