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 ...
随机推荐
- win10*64+vs2015+opencv3.0工程模板配置
参考网上的资料,自己再次整合一下,为新手提供个方便,也为自己备份. 一.下载安装opencv3.0 1.首先下载opencv3.0的包(windows版本的) 2.安装opencv,路径自己选好,自动 ...
- 扩展Python模块系列(三)----参数解析与结果封装
在上一节中,通过一个简单的例子介绍了C语言扩展Python内建模块的整体流程,从本节开始讲开始深入讨论一些细节问题,在细节讨论中从始至终都会涉及[引用计数]的问题.首先讨论C语言封装的Python函数 ...
- Redis-入门笔记-15min带你一览redis
如果转载,请注明博文来源: www.cnblogs.com/xinysu/ ,版权归 博客园 苏家小萝卜 所有.望各位支持! 少年入门笔记,整理出来一起入坑!入门的视屏 ...
- 移动端 canvas插入多张图片生成一张可保存到手机图片
第一次写随笔,想把开发中遇到的问题与大家分享,可能会让您少走一步弯路. 先看下效果图: 代码分三部分为大家展示: 1.html 部分 <div id="myQrcontainer&qu ...
- 使用Jetty运行Java Web项目（Maven）
目前流行的两款IDE: Eclipse和IntelliJ IDEA 2. IntelliJ IDEA
- Nginx反向代理和负载均衡的配置
1.反向代理配置 反向代理也称"动静分离",nginx不自己处理图片的相关请求,而是把图片的请求转发给其他服务器来处理. 修改nginx部署目录下conf子目录的nginx.con ...
- eclipse导入SVN上的Maven多模块项目
eclipse导入SVN上的Maven多模块项目 博客分类: Eclipse&MyEclipse SVN Maven 一.SVN上Maven多模块项目结构 使用eclipse导入SVN上的 ...
- sed 实践案例 （不定期更新）
删除每行第一个字符 sed -r 's/^.//g' /etc/passwd 删掉每行第二个字符 sed -r 's/^(.)(.)/\1/g' /etc/passwd 删掉每行最后一个字符 sed ...
- 【HotSpot】 jps
jps(1) General Commands Manual jps(1) Name jps - Java Virtual Machine Process Status Tool SYNOPSIS j ...
- 【Ubuntu Desktop】安装主流桌面
ubuntu的桌面环境实在多,在这里选了几款主流的桌面环境,大家可以按需安装使用. 1.GNOME 2 Classic 经典老界面 gnome2 after reboot,choose GNOME ...