前端之HTML5，CSS3（三）
过渡
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果的特性称为过渡。简单来说，就是某一元素从一种状态平滑的转变为另一种状态的过程。
过渡(transition)的属性
基本语法：选择器 {transition:过渡属性 花费时间 运动曲线 开始时间延时}，存在多组属性变化可以使用逗号隔开，多组属性变化可以看到表现为慢动画效果。
| 属性 | 描述 |
| 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.
原文地址：https://www.cnblogs.com/snow-lanuage/p/10823143.html
时间： 2024-10-11 20:16:26