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

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

目录导航

css3 transition 动画基础详细教程

发布于 2013-11-05  
CSS教程

transition是css3中新添加的特性,在W3C标准中是这样描述的:“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并平滑的以动画效果改变css的属性值。”

一、transition语法:

transition:[<transition-property>||<transition-duration>||
<transition-timing-function>||<transition-delay>||
<transition-property>||<transition-duration>||
<transition-timing-function>||<transition-delay>]

transition主要包含四个属性值:执行变换的属性transition-property,变换延续的时间transition-duration,在延续的时间段内,变换的速率变化transition-timing-function,变换延迟时间transition-delay。

1、变化的属性:transition-property

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

transition-property是用来指定当元素其中一个属性改变时执行transition效果,其中none没有属性改变;all所有属性都改变,它也是默认值;indent元素属性名,其对应的类型如下:

2、动画时间:transition-duration

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

transition-duration是动画执行的时间,单位为s(秒),比如0.1秒可以写成“0.1s”或者“.1s”,它可以作用于任何元素,包括:before和:after伪元素。

3、动画执行的方式:transition-timing-function

transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out;

ease:逐渐慢下来;linear:匀速;ease-in:由慢到快;ease-out:由快到慢;ease-in-out:先慢到快再到慢。

4、动画延迟:transition-delay

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

transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition动画效果,取值同transition-duration。

本文出自零度科技转载请注明出处:http://www.ldisp.com/a/css/2013/2303.shtml

上一篇:条件注释判断浏览器<!--[if !IE]><!--[if IE]><!--[if l
下一篇:CSS强制性换行(兼用各大浏览器)

 
了解零度?

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

海外服务器租用

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

海外特价服务器

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

0

业务咨询

    技术服务

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