CSS3动画效果transition
1.transition的浏览器支持情况
IE10+支持，IE6\7\8\9都不支持！目前，其他浏览器最新版本都支持，不需要再加前缀 -webkit- 之类的了
2. 还是一步一步说说怎么用transition吧
页面只有一个div，其css如下：
<style type="text/css">
div {
width:100px;
height:30px;
background-color:#FF9900;
}
div:hover {
width: 300px;
}
</style>
鼠标移动到div上，div立刻变宽为300px，效果如下：
现在在div身上加上 transition:0.5s;
<style type="text/css">
div {
width:100px;
height:30px;
background-color:#FF9900;
/* 加上这个，让变化慢一点 */
transition: 0.5s;
}
div:hover {
width: 300px;
}
</style>
效果如下：
原来是瞬间，现在div的css样式中加入了transition属性，变成了缓慢的动画了。那么问题来了，如下：
3.transition写在哪？
继续上面的案例，我们写在div上，就是告诉div，以后变化将会有过渡，为什么不是加在div:hover中？
将div里的transition:0.5s删掉，放在div:hover中，（css代码略）效果如下
鼠标放在上面，效果还好，慢慢伸长，鼠标一松，立刻变短，没有过渡效果。为什么？
因为div:hover状态时，有这个transition属性，而div由短变长中，给个过渡，就有动画。当鼠标离开div，不是hover状态了，div没有transition属性，所以，立刻变短。
既然是变化，那就至少涉及到两个状态，变化前的状态，变化后的状态。两个状态不一样，然后给予慢镜头过渡。就形成了动画。
也就是说：你想让谁的变化具有动态过渡的效果，那transition属性就加在谁身上，还要加的让变化前后两个状态，都能有transition属性（要知道，div:hover时，也可有获取到div中的属性，反过来就不行了）。
在这里，变化前是div，变化后div:hover，两个显示出来不同。鼠标移动触发的动画效果。那么这就有个问题了，如下：
4.怎么触发transition动画？
上面知道，变化前div {...} ，变化后 div:hover {...} 。其中:hover状态就是鼠标移动过去触发的。这种就是通过伪类触发。
伪类触发 比如 :hover : focus :checked :active，有了这些伪类，就有了“状态”，有了状态，就有了不同，有了不同，就有了过渡动画。
还可以通过js触发，比如说：js控制div增加个class为donghua，那么，页面中该div增加个class，其属性要变，如果设置过transition，那就会有动画效果。这么理解吧：浏览器发现该div变成div.donghua了，而且发现形状大小色彩等前后不一样了，给前后状态变化的过程来个慢镜头，就形成了动画。
<!-- 并不会有动画，而是直接显示宽度300px（如果是js操作，增加的donghua这个class就可以） -->
<style type="text/css">
div {
height:30px;
background-color:#FF9900; width:100px;
transition: 0.5s;
}
div.donghua {
width: 300px;
}
</style>
... <div class="donghua"> </div>
上面的并不会有动画效果，因为页面显示出来的时候，就已经有了class="donghua" ，覆盖了原来100px的定义，直接显示宽度为300px了。下面个例子演示js控制，导致的变化，有了变化，也就有了动画。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p {
height:30px;
background-color:#FF9900; width:100px;
transition: 0.5s;
}
div.donghua p{
width: 300px;
}
</style>
</head>
<body>
<div>
<p>看我的变化</p>
</div>
<script type="text/javascript">
window.onload = function(){
document.body.children[0].onclick = function(){
if(this.className == 'donghua'){
this.className = '';
}else{
this.className = 'donghua';
}
}
}
</script>
<!--
这个例子还想说明的是：<p>是变化的部分，transition加在p身上，
但是触发变化不一定是p多个class，或者在hover状态 ，可能因为父级多个class什么的（或其他原因），也会导致变化
总之，有变化，就有过渡动画。管它是什么导致的呢！
-->
</body>
</html>
效果如下：
知道动画怎么触发的了，下面就要讲讲transition的具体参数了
5.transition都有哪些参数？默认是什么？可以怎么写？
transition是这四个属性的复合样式
| 属性名 | 描述 |
|---|---|
| transition-property | 指定CSS属性的name，transition效果（元素上的什么css属性变化，默认是all，上面例子就是div的width变化，设置为none则无变化） |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成（可以是1s、0.5s、200ms，默认0） |
| transition-timing-function | 指定transition效果的转速曲线 （匀速呢？还是先快后慢，或是先慢后快，等等...默认ease） |
| transition-delay | 定义transition效果开始的时候（等多久开始，默认0） |
transition: property duration timing-function delay;
默认all 0 ease 0
先讲讲transition-property，举例：
div {
width:100px;
height:30px;
background-color:#FF9900;
transition: 1s;
}
div:hover {
width: 300px;
height: 90px;
background-color: green;
}
页面只有一个div标签，动画效果如下，鼠标移上去，宽高背景色都慢慢变了：
现在，把上面css第5行的transition: 1s;改为transition:width 1s; 那么就只有width是渐变，其他的都是突变，效果如下：
transition-property默认是all，这个例子就是写的width，那就只有width渐变，也可以写none，那就没有渐变效果了，等于没写。
第二个参数就是动画耗时 transition-duration，默认是0，所以必不可少，要不然没有动画效果，没什么可说的。
第三个参数transition-timing-function的值：
- ease（默认值）逐渐变慢
- linear 匀速
- ease-in 加速
- ease-out 减速
- ease-in-out 先加速后减速
- cubic-bezier贝塞尔曲线(x1,y1,x2,y2)
http://cubic-bezier.com/ 这个网站是贝塞尔曲线数据生成工具，使用贝塞尔曲线的代码示例如下
transition:all 1s cubic-bezier(0.27,1.01,0.95,0.22)
第四个参数是延迟时间，就是等待多久才开始执行动画。（在做导航栏下拉菜单时，有个延迟时间，让鼠标划过时不会立即显示，防止误划）上面的都没有设置，如果设置为2s，那边鼠标移动上去div上，div是hover状态，但是要等2s后，动画执行开始，如果不到2s鼠标就移开了，div就不是hover状态了，那就不执行动画了。
上面我们对几个参数搞清楚了，但是有个问题就是，宽高背景要么一起开始变，要么就只有某个突然变，我要想让宽度变化1s完成，高度变慢点2s完成，背景更慢3s完成，怎么办？写3次transition吗？答曰：用逗号隔开即可。
6.transition多样式怎么写？
还是上面div变化的案例，代码就不重新搬运了，只写改动的部分。
/* 多个样式各个样式用逗号隔开即可 */
/* 宽度1s完成变化，高度延迟1s执行，2s完成变化，背景色3s完成变化 */
transition:width 1s, height 2s 1s, background 3s;
效果如下：
未完待续
CSS3动画效果transition的更多相关文章
- CSS3 动画效果带来的bug
css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...
- css3动画（transition）属性探讨
在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠 ...
- 第八十三节，CSS3动画效果
CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一．动画简介 CSS3提 ...
- CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
- css3 动画效果 总结 不断完善~~
1.transition 动画过程改变某个css属性的效果 (比如宽高 颜色) 语法 transition: all 所有元素 + ...
- 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 ...
随机推荐
- .NET Core微服务之服务间的调用方式（REST and RPC）
Tip: 此篇已加入.NET Core微服务基础系列文章索引 一.REST or RPC ? 1.1 REST & RPC 微服务之间的接口调用通常包含两个部分,序列化和通信协议.常见的序列化 ...
- GetPathFromUri4kitkat【Android 4.4 kitkat以上及以下根据uri获取路径的方法】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 在Android4.4之前和之后,通过Intent调用文件管理器选择文件,获取的文件uri地址形式是不同的. Android6.0 ...
- DotNetCore跨平台~EFCore数据上下文的创建方式
回到目录 对于DotNetCore来说,把大部分组件者放在DI容器里,在startup中进行注入,在类的构造方法中进行使用,如果某些情况下,无法使用这种DI的方式,也可以自己控制数据上下文的生产过程, ...
- Asp.Net Core 轻松学-在.Net Core 使用缓存和配置依赖策略
前言 几乎在所有的应用程序中,缓存都是一个永恒的话题,恰当的使用缓存可以有效提高应用程序的性能:在某些业务场景下,使用缓存依赖会有很好的体验:在 Asp.Net Core 中,支持了多种缓存组 ...
- SLAM+语音机器人DIY系列：（七）语音交互与自然语言处理——1.语音交互相关技术
摘要 这一章将进入机器人语音交互的学习,让机器人能跟人进行语音对话交流.这是一件很酷的事情,本章将涉及到语音识别.语音合成.自然语言处理方面的知识.本章内容: 1.语音交互相关技术 2.机器人语音交互 ...
- python类属性用法总结
属性的定义:python中的属性其实是普通方法的衍生. 操作类属性有三种方法: 1.使用@property装饰器操作类属性. 2.使用类或实例直接操作类属性(例如:obj.name,obj.age=1 ...
- jQuery获取或设置元素的宽度和高度
jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...
- 008. 阻塞&非阻塞、同步&异步
阻塞 非阻塞:关注的对象是调用者: 阻塞:调用者发起调用后,处于等待状态,直到该调用有返回: 非阻塞:调用者发起调用后,不需要等待返回,可以往下执行: 同步 异步: 关注的对象是被调用者: 同步:服 ...
- wordpress主题
1.创建wordpress主题:在themes文件下建立新主题black文件夹 2.在black文件夹中放入index.php和style.css文件,其中index对style.css文件的引用 & ...
- 【设计模式】单例模式 Singleton Pattern
通常我们在写程序的时候会碰到一个类只允许在整个系统中只存在一个实例(Instance) 的情况, 比如说我们想做一计数器,统计某些接口调用的次数,通常我们的数据库连接也是只期望有一个实例.Windo ...