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 ...
随机推荐
- 《开发技巧》WEB APP开发调试技巧
前言 随着html5和nodejs的兴起.web APP越来越火,一套代码可以多平台使用.减少了很大的开发成本.很多APP中也集成了很多的html5页面,增强很高的应用体验.所以移动端页面也事关重要! ...
- [小北De编程手记] Lesson 01 - AutoFramework构建 之 从一个简单的Demo聊起
写在最前面 这个系列的主旨是要跟大家分享一下关于自动化测试框架的构建的一些心得.这几年,做了一些自动化测试框架以及团队的构建的工作.过程中遇到了很多这样的同学,他们在学习了某一门语言和一些自动化测试的 ...
- 使用我的编译器,下面的代码 int i=7; printf("%d\n", i++ * i++); 返回 49？不管按什么顺序计算, 难道不该打印出56吗？
尽管后缀自加和后缀自减操作符 ++ 和 -- 在输出其旧值之后才会执行运算, 但这里的"之后"常常被误解.没有任何保证确保自增或自减会在输出变量原值之 后和对表达式的其它部分进行计 ...
- java虚拟机详解
注: 此篇文章可以算是读<深入理解Java虚拟机:JVM高级特性与最佳实践>一书后的笔记总结加上我个人的心得看法. 整体总结顺序沿用了书中顺序,但多处章节用自己的话或直白或扩展的进行了重新 ...
- [算法题] Remove Duplicates from Sorted Array ii
题目内容 本题来源LeetCode Follow up for "Remove Duplicates": What if duplicates are allowed at mos ...
- 前端到后台ThinkPHP开发整站（1）
1.前言: 我个人从来没有写过博客文章,作为一个程序员没有自己的博客算是一个合格的程序员,所以我地想想也要经营起一个的博客,做一个小项目,写这博客算就做这个项目的一个项目笔记吧!现在自学着ThinkP ...
- windows 注入 之 CreateRemoteThread
钩子(Hook),是Windows消息处理机制的一个平台,应用程序可以在上面设置子程以监视指定窗口的某种消息,而且所监视的窗口可以是其他进程所创建的.当消息到达后,在目标窗口处理函数之前处理它.钩子机 ...
- selenium--关键字驱动
package com.dn.twohomework;import java.util.ArrayList;import java.util.Set;import java.util.List;// ...
- Qt支持中文显示
Qt支持中文显示<1>.在代码中添加以下代码 QTextCodec* codec = QTextCodec::codecForLocale(); if (codec != NULL) { ...
- S7-300之间的PROFIBUS-DP主从通信
一.PROFIBUS-DP简介 1.由来 2..总线连接器 二.系统结构示例 三.组态过程示例 三,DP网络组态 1.新建一个项目和两个300站点如下 2.组态从站DP网络 1)点击常规中的属性 2) ...