本文共 693 字，大约阅读时间需要 2 分钟。

O(∩_∩)O~

这两天在看看CSS的相关内容，关于transition动画感觉很有意思，分享一下。

CSS负责给html加效果，自然少不了各种动画，今天介绍一下transition。

概述

看一段比较学术的定义：transition主要负责页面的过渡效果，transition可以使css的属性值在一定时间内平滑地过渡。这种效果可以在鼠标划过、点击、获得焦点或者对元素的任何改变中触发，并平滑地以动画效果改变css的属性值。

transition的几个常用属性

1.transition-property：设置哪些属性进行过渡。

2.transition-duration：完成过渡动画需要的时间，默认为零。

3.transition-timing-function：设置动画的缓冲效果，默认是ease（逐渐变慢）。其他常用的几个值有ease-in（加速），ease-out（减速），ease-in-out（先加速后减速）。

4.transition-delay：设置动画开始的延迟时间，默认是零。

ps：实际应用中，可以将四个属性简写到一条指令：transition：property duration timing-function delay; 实际就是把四个属性合到一块儿，中间用空格隔开。

实例

使用transition，实现一个过渡效果，一个红色的正方形，当鼠标进入该区域时，红色正方形放大一倍，同时变成绿色的圆形。鼠标离开，还原到初始状态。

1  2  3  4     
     5      6  7 29 30 
    
31 32 

转载地址：http://uchbz.baihongyu.com/