欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>CSS教程

目录导航

CSS3动画之CSS3过渡(css3 transition)

美国西岸机房 发布于 2013-06-05  
CSS教程

CSS3的出现最引人注意的地方莫过于css动画(CSS Animation)了,而css3过渡(CSS Transition)让动画变的生动更逼真。今天就带大家一起来认识一下CSS Transition。

CSS3 Transitions

有了它,我们从一种效果转换到另一种效果而无需javascript或flash,我们只需一段CSS代码而已。

浏览器支持

属性浏览器
transition

Internet Explorer不支持过渡属性。
Firefox4需要前缀-moz-。
Chrome和Safari需要前缀-webkit-。
Opera需要前缀-o-。

它是如何工作?

CSS3的过渡效果,让一个元素从一种效果转换到另一种效果。
要做到这一点,你必须指定两件事:

  1. 指定要添加效果的CSS属性
  2. 指定效果的持续时间。

举例说明:

div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

注意:如果未指定动画延迟时间,过渡将没有任何效果,因为默认值是0。
鼠标放上去的时候,变换开始:

div:hover {width:300px;}

在哪里定义动画效果?

css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠标事件来定义。

动态伪类起作用的元素描述
:link只有链接未访问的链接
:visited只有链接访问过的链接
:hover所有元素鼠标经过元素
:active所有元素鼠标点击元素
:focus所有可被选中的元素元素被选中

js的事件也可以,比如click,focus,mousemove,mouseover,mouseout等等

到零度科技查看原文:http://www.ldisp.com/a/css/2013/1600.shtml

上一篇:取消Chrome和Safari下文本域的resize和focus边框
下一篇:IE6 z-index 无效的解决办法

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

0

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理