CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡。我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变 CSS 的属性值。以下是 transition 属性的浏览器支持、语法和示例。

浏览器支持:

Internet Explorer 10 及以上版本、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。Internet Explorer 9 以及更早的版本不支持 transition 属性。Chrome 25 以及更早的版本,需要前缀 -webkit-。

语法:

transition 属性主要包含四个属性值:transition-property -- 规定应用过渡的 CSS 属性的名称;transition-duration -- 定义过渡效果花费的时间,默认是 0;transition-timing-function -- 规定过渡效果的时间曲线。默认是 "ease";transition-delay -- 规定过渡效果何时开始,默认是 0。transition -- 简写属性,用于在一个属性中设置四个过渡属性。如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开。

一、改变宽度属性

div.css3-transition-test1 {
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in;
transition-delay: 0;
/* Firefox 4 */
-moz-transition-property: width;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-in;
-moz-transition-delay: 0;
/* Safari and Chrome */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in;
-webkit-transition-delay: 0;
/* Opera */
-o-transition-property: width;
-o-transition-duration: 1s;
-o-transition-timing-function: ease-in;
-o-transition-delay: 0;
}

div.css3-transition-test1 {
transition: width 1s ease-in;
-moz-transition: width 1s ease-in; /* Firefox 4 */
-webkit-transition: width 1s ease-in; /* Safari and Chrome */
-o-transition: width 1s ease-in; /* Opera */
}

二、改变多个属性
p.css3-transition-test2:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

以上是在网上找的例子:有点问题,我自己是这样写的
.yangsheng_guan_5_1{
  opacity:0; /* 0 相当于隐藏*/
  display:block;
  transition:0.6s; /*过渡时间*/
  -webkit-transition: .6s; /*老版本火狐 浏览器*/
  -moz-transition: .6s; /* Firefox 4 */
  -o-transition: .2s; /*Safari Chrome 浏览器*/
}
.yangsheng_guan_5:hover .yangsheng_guan_5_1{
  opacity:1; /* 1 相当于显示*/
}
 
 

CSS3 transition 属性过渡效果 详解的更多相关文章

  1. CSS3 transition 属性 过渡效果

    <!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; backg ...

  2. css3 box-sizing属性值详解

    box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,border和padding不计算入widt ...

  3. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  4. CSS3教程:pointer-events属性值详解 阻止穿透点击

    转:http://www.poluoluo.com/jzxy/201109/142876.html 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样 ...

  5. CSS3属性transform详解【转载】

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  6. CSS3的@keyframes用法详解:

    CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...

  7. pointer-events属性值详解

    其实早知道这个属性,但是一直没有去研究过.今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下.嗯,其实这是个比较简单的CSS3属性. 在某个项目中,很多元素需 ...

  8. css3(border-radius)边框圆角详解(转)

    css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...

  9. 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)

    [二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...

随机推荐

  1. Eclipse 4.5.0 离线安装 Veloeclipse 插件

    下载 Veloeclipse 在 Eclipse eclipse-jee-mars-R-win32-x86_64 版本 4.5.0,Build id 为 20150621-1200,离线安装 Velo ...

  2. Eureka的优势

    http://www.cnblogs.com/zgghb/p/6515062.html Eureka的优势 1.在Eureka平台中,如果某台服务器宕机,Eureka不会有类似于ZooKeeper的选 ...

  3. Vim命令相关

    在shell中,记住一些常用的vim命令,会在操作时候事半功倍. 光标移动 h,j,k,l,h #表示往左,j表示往下,k表示往右,l表示往上 Ctrl f #上一页 Ctrl b #下一页 w, e ...

  4. Socket网络编程--网络爬虫(2)

    上一小节,我们实现了下载一个网页.接下来的一步就是使用提取有用的信息.如何提取呢?一个比较好用和常见的方法就是使用正则表达式来提取的.想一想我们要做个什么样的网络爬虫好呢?我记得以前好像博客园里面有人 ...

  5. Socket网络编程--简单Web服务器(1)

    这一次的Socket系列准备讲Web服务器.就是编写一个简单的Web服务器,具体怎么做呢?我也不是很清楚流程,所以我找来了一个开源的小的Web服务器--tinyhttpd.这个服务器才500多行的代码 ...

  6. python工具 - 从文件名读取特定信息到excel表格

    情景:文件名中包含学号和用户名,其中用户名在前学好在后,学号为2位,如harry33.txt.natasha12.txt. 要求:将多个文件名中的用户名与学号分开并保存到excle中. 代码部分: i ...

  7. elasticsearch中 refresh 和flush区别【转】

    elasticsearch中有两个比较重要的操作:refresh 和 flush refresh操作 当我们向ES发送请求的时候,我们发现es貌似可以在我们发请求的同时进行搜索.而这个实时建索引并可以 ...

  8. cbow与skip-gram

    场景:上次回答word2vec相关的问题,回答的是先验概率和后验概率,没有回答到关键点. 词袋模型(Bag of Words, BOW)与词向量(Word Embedding)模型 词袋模型就是将句子 ...

  9. Unsafe 学习和源码阅读

    在代码中获取 Unsafe 对象的方法: // 在 AtomicInteger 里面是这么用的private static final Unsafe unsafe = Unsafe.getUnsafe ...

  10. STM32 多通道ADC采样,采用Timer1进行采样率控制,利用DMA进行传输

    http://blog.csdn.net/varding/article/details/17559399 http://www.51hei.com/stm32/3842.html https://w ...