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 ...
随机推荐
- KnockoutJS-快速入门
虽然在WPF中接触过MVVM模式,可是刚开始在Web中接触到Knockout.JS让我大吃一惊,简化了好多工作量,原来可能需要一大堆的JS脚本完成的工作量,被释放许多.接触KnockoutJS一年多了 ...
- SpringBoot技术栈搭建个人博客【前台开发/项目总结】
前言:写前台真的是我不擅长的东西...所以学习和写了很久很久...前台页面大概开发了两天半就开发好了,采用的静态的html和bootstrap来写,写后台的时候纠结住了...怎么说呢,写页面真的是头疼 ...
- 声明式RESTful客户端在asp.net core中的应用
1 声明式RESTful客户端 声明式服务调用的客户端,常见有安卓的Retrofit.SpringCloud的Feign等,.net有Refit和WebApiClient,这些客户端都是以java或. ...
- 【转载】java static 关键字的四种用法
原文链接点这里,感谢博主分享 在java的关键字中,static和final是两个我们必须掌握的关键字.不同于其他关键字,他们都有多种用法,而且在一定环境下使用,可以提高程序的运行性能,优化程序的结构 ...
- 高可用实现KeepAlived原理简介
一.简介 目前主流实现web网站及数据库服务高可用软件包括:keepalived.heartbeat.corosync,cman;高可用简称HA: 官方站点:https://www.keepalive ...
- DSAPI 菜单渲染
在本节,将演示DSAPI.菜单渲染功能.本功能支持对WINFORM菜单项的任意细节进行处理,使用配色方案进行渲染,默认配色方案为Visual Studio2012的黑色主题风格. 我们先来看一下未使用 ...
- 从QA到工程能效团队
Engineering Productivity Productivity is our job; testing and quality are the job of everyone involv ...
- Linux网络相关概念和修改IP地址的方法
2.1.1 网卡的命名规则 CENTOS6的网卡命名方式:它会根据情况有所改变而非唯一且固定,在CENTOS6之前,网络接口使用连续号码命名: eth0. eth1等,当增加或删除网卡时,名称可能会 ...
- iframe 父页面调用子页面的vue方法
父页面代码: html: <div id="app"> //省略业务代码x行..... <iframe sr ...
- 3.JavaScript-语法、关键保留字及变量
语法构成区分大小写标识符注释直接量字面量literal关键字保留字变量语法构成JavaScript 的语言核心 ECMAScript. 区分大小写ECMAScript 中的一切,包括变量.函数名和操作 ...