认识CSS3特性之过渡

时间 2019-11-19

标签认识 css3 css 特性过渡栏目 CSS 繁體版

原文原文链接

前端之HTML5，CSS3（三）

　　过渡

　　经过 CSS3，咱们能够在不使用 Flash 动画或 JavaScript 的状况下，当元素从一种样式变换为另外一种样式时为元素添加效果的特性称为过渡。简单来讲，就是某一元素从一种状态平滑的转变为另外一种状态的过程。css

　　过渡(transition)的属性

基本语法：选择器 {transition:过渡属性花费时间运动曲线开始时间延时}，存在多组属性变化能够使用逗号隔开，多组属性变化能够看到表现为慢动画效果。html

属性	描述
transition	属性连写，能够设置下面四个过渡属性
transition-property	须要过渡的属性，即要变化的属性
transition-duration	过渡时间，即变化须要花费多少时间，默认为0
transition-timing-function	过渡曲线，即变化效果的时间曲线，默认是ease
transition-delay	过渡开始延时，即变化的开始时间，默认为0

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>过渡-测试</title>
 6     <style type="text/css">
 7         div {
 8             width: 200px;
 9             height: 200px;
10             background-color: skyblue;
11             transition: width 2s ease 0s, height 3s linear 2s;
12         }
13         div:hover {
14             width: 400px;
15             height: 600px;
16         }
17     </style>
18 </head>
19 <body>
20     <div></div>
21 </body>
22 </html>

　　上述代码效果自行测试，代码中一个天蓝色200*200像素的盒子，鼠标通过会变化成一个400*600的盒子，大小发生变化，是由一种装填向另外一种状态转变的过程，使用过渡(transition)。设置transition:width 2s ease 0s ,height 3s linear 2s，其意思是过渡效果设置为鼠标通过200*200的盒子时，设置transition-delay为0s的属性，即宽度开始变化，按照transition-timing-function属性值为ease(慢-快-慢)时间速度曲线，在进行2s时完成变化为宽度400像素的盒子；与此同时，2s时，高度开始按照linear(匀速)的时间速度曲线，花费3s变化成高度为600像素的盒子，至此结束。前端

　　transition-timing-funcing表示变化速度的意思，属性值有：linear(匀速)，ease(慢速-快速-慢速)，ease-in(慢速-快速)，ease-out(快速-慢速)...详细了解请看W3Cschool.测试