（25）css3过渡属性transition_Web前端田根旺

大大的周 02-07 5716

一、动画效果

CSS3 出现之前，前端一般使用Flash 动画或 JavaScript 制作动画。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。例如，photoshop（简称：ps）软件的时间轴中的帧动画制作。

二、过渡属性transition作用

作用：在不使用 Flash 动画或 JavaScript 的情况下，使用 transition 可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），那么A和B之间就可以实现平滑的过渡的动画效果。为了方便看效果，我们使用 :hover 切换状态。

三、过渡属性transition语法格式

四、?单一属性写法

4.1transition-property过渡的属性 none 表示没有属性过渡all 表示所有变化的属性都过渡属性名使用具体的属性名，多个属性名中间逗号分隔? 4.2时间

过渡时间：以s秒为单位。

延时时间：以s秒为单位。0s也必须加单位。

4.3transition-timing-function时间曲线

4.4贝塞尔曲线

?五、transition过渡属性示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css3transition过渡属性</title> <style> div { width: 200px; height: 200px; background-color: pink; /* transition-property: all; transition-duration: 2s; transition-timing-function: ease; transition-delay: 2s; */ /* 简写方式 */ transition: all 2s ease 2s; } div:hover { width: 500px; height: 500px; } </style> </head> <body> <div></div> </body> </html>

?六、transition过渡属性的浏览器兼容 Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。注意：Internet Explorer 9 以及更早的版本，不支持 transition 属性。