css3 transition 动画基础

最新推荐文章于 2024-04-22 12:14:20 发布

转载最新推荐文章于 2024-04-22 12:14:20 发布 · 48 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yhq361/p/4273718.html

本文详细介绍了CSS中的过渡动画属性transition的使用方法，包括变化的属性transition-property、动画时间transition-duration、动画执行方式transition-timing-function及动画延迟transition-delay等。

一、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。

转载于:https://www.cnblogs.com/yhq361/p/4273718.html