CSS3 Transition介绍

CSS3提供了一种全新的方式来定义CSS属性改变时的过渡效果,通常在:hover、:focus的条件下触发。过去,为了实现这种平滑的过渡效果,我们需要借助于Flash技术,现在只需要简单的使用CSS3 Transition的方法,就可以实现。Transition的效果,可以广泛的应用在background-color、width、height、opacity等属性发生改变时。目前,CSS3 Transition模块还在草案阶段,所以规范和语法还未完全确定下来,目前也并不是所有的浏览器支持CSS3,所以还需要一些特殊的代码来实现多浏览器的兼容。

下面用一个简单的例子来说明CSS3 Transition的效果:

 #example1 { width:80%; padding:15px; font-size:14px; color:#fff; background-color:#ED8029; border-radius:5px; } #example1:hover { background-color:#A7B526; } #example2 { width:80%; padding:15px; font-size:14px; color:#fff; background-color:#ED8029; border-radius:5px; -webkit-transition:background-color 5s; -moz-transition:background-color 5s; -o-transition:background-color 5s; -ms-transition:background-color 5s; transition:background-color 5s; } #example2:hover { background-color:#A7B526; } h3 { margin:10px 0px; } 

Example 1: 没有过渡效果

Example 2: 5秒钟的过渡效果

.code { background-color:#ccc; padding:10px; } 
CSS3 Transition的语法:
transition: <transition> [, <transition>]*
<transition> = <transition-property> <transition-duration> <transition-timing-function> <transition-delay>

这种写法是比较简单的写法,我们可以同时写多个Transition效果,每个效果按照固定属性的顺序书写。如下

transition:left 3s linear, background-color 3s ease; 
.container { position:relative; padding:15px; height:50px; border:1px solid #ccc; width:80%; } 	#example3 { width:50px; height:50px; border-radius:5px; background-color:#08c; left:0px; top:0px; position:absolute; margin:15px; -webkit-transition:left 3s linear, background-color 3s ease; -moz-transition:left 3s linear, background-color 3s ease; -o-transition:left 3s linear, background-color 3s ease; -ms-transition:left 3s linear, background-color 3s ease; transition:left 3s linear, background-color 3s ease; } 	#example3:hover { left:300px; background-color:#000;  } 	 

transition的属性包括:需要应用的属性transition-property、Transition的时间transition-duration、时间函数transition-timing-function、延迟时间(可选参数)transition-delay。这些属性也可以单独的指定,分别介绍如下:

transition-property

transition-property:none | all | [ <IDENT> ] [, <IDENT> ]*

如果使用all关键字或者省略了transition-property,那么所有发生变化的属性都会应用transition,如果使用none关键字,则不会有transition效果。如果指定了多个属性,那么在其他的transition-*属性中,也需要按照对应的顺序指定。所有支持Transition的属性,可以在3中看到。

transition-duration

这个属性接受以逗号分割的一系列数值,表示Transition持续的时间,接受2s或者2000ms的形式。默认值为0,表示Transition立即生效。

transition-duration: <time> [, <time> ]*

transition-timing-function

这个属性指定transition的效果,可以通过预定义的函数来实现(ease、linear、ease-in、ease-out、ease-in-out),也可以自己指定函数。

transition-timing-function:<timing-function> [, <timing-function>]*

下面看一下预定义的函数的效果

#ExampleB { width: 520px; } #ExampleB div { width: 100px; margin: 5px 0; padding: 5px; color: white; background-color: #ED8029; text-align: right; border-radius: 5px; } #ExampleB:hover div { width: 500px; } #ExampleB div.ease { -webkit-transition: 3s ease; -moz-transition: 3s ease; -o-transition: 3s ease; -ms-transition: 3s ease; transition: 3s ease; } #ExampleB div.linear { -webkit-transition: 3s linear; -moz-transition: 3s linear; -o-transition: 3s linear; -ms-transition: 3s linear; transition: 3s linear; } #ExampleB div.easein { -webkit-transition: 3s ease-in; -moz-transition: 3s ease-in; -o-transition: 3s ease-in; -ms-transition: 3s ease-in; transition: 3s ease-in; } #ExampleB div.easeout { -webkit-transition: 3s ease-out; -moz-transition: 3s ease-out; -o-transition: 3s ease-out; -ms-transition: 3s ease-out; transition: 3s ease-out; } #ExampleB div.easeinout { -webkit-transition: 3s ease-in-out; -moz-transition: 3s ease-in-out; -o-transition: 3s ease-in-out; -ms-transition: 3s ease-in-out; transition: 3s ease-in-out; } 

ease

linear

ease-in

ease-out

ease-in-out

transition-delay

这个是一个可选属性,可以用来制定在多长时间后触发transition,默认是0.

transition-delay: <time> [, <time> ]*

.reference { line-height:14px; margin-top:15px; } .reference p { line-height:14px; }

参考资料:

1、An Introduction to CSS3 Transitions

2、CSS3 transition-timing-function使用参考指南

3、CSS Transitions

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WebDeveloper

使用css3属性处理单词的换行和断词

22030
来自专栏liulun

riot.js教程【六】循环、HTML元素标签

前文回顾 riot.js教程【五】标签嵌套、命名元素、事件、标签条件 riot.js教程【四】Mixins、HTML内嵌表达式 riot.js教程【三】...

31280
来自专栏JavaEdge

全面入门jQuery最佳实践(二)-jQuery的属性与样式1 .attr()与.removeAttr()2 html()及.text()

每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。如:在img元素中,src就是元素的特性,用来标记图片的地址。

11830
来自专栏xingoo, 一个梦想做发明家的程序员

【web必知必会】—— DOM:四个常用的方法

 终于开始复习DOM的知识了,这一阵忙乎论文,基本都没好好看技术的书。   记得去年实习的时候,才开始真正的接触前端,发现原来JS可以使用的如此灵活。 ...

20150
来自专栏前端知识分享

第26天:js-$id函数、焦点事件

一、函数return语句 定义函数的返回值,在函数内部用return来设置返回值,一个函数只能有一个返回值。同时,终止代码的执行。 所有自定义函数默认没有返回值...

14710
来自专栏码洞

Go 语言切片的三种特殊状态 —— 90% 的开发者都忽视了

我们今天要来讲一个非常细节的小知识,这个知识被大多数 Go 语言的开发者无视了,它就是切片的三种特殊状态 —— 「零切片」、「空切片」和「nil 切片」。

10420
来自专栏james大数据架构

Jquery基本用法总结

选择器 $("#mydiv") 通过ID $("p#myp") 选择id=myp 的所有p元素(组合型) $(".mydiv") 通过 class="mydi...

20690
来自专栏HTML5学堂

JQuery选择器(中)

HTML5学堂:在学习JQuery开发的时候,选择器有多种,而我们将接着介绍选择器的其他类型,希望对大家有帮助! 5.临近选择器: $("mix+mix"),选...

38390
来自专栏IMWeb前端团队

JavaScript强化教程——style、currentStyle、getComputedStyle区别介绍

本文为 H5EDU 机构官方 HTML5教程,主要介绍:JavaScript强化教程 —— style、currentStyle、getComputedStyl...

23360
来自专栏Android先生

Android开发人员不得不学习的Vue.js基础

Vue是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一...

15120

扫码关注云+社区

领取腾讯云代金券