一、什么是过渡
鼠标移动到一个元素上面,元素发生变化,鼠标移走,变化消失;这是一个动态的过程,这就是过渡。在CSS过渡中允许你在给定的时间内平滑地改变属性值。
通过过渡可以指定一个属性发生变化的切换方式;
通过过渡可以创建一些非常好的效果,提升用户体验感;
使用过渡就是使用我们transition这个属性;
二、过渡的属性
1、transition 【复合写法】用于向四个过渡属性设置为单一属性
2、transition-duration 规定过渡效果要持续多少秒/毫秒,属性值:时间【必须属性】
3、transition-delay 规定过渡效果的延迟(以秒记)属性值:时间
4、transition-property 规定过渡效果所针对的CSS属性的名称
5、transition-timing-function 规定过渡效果的速度曲线
这些属性值部分顺序,但第一个时间必定是过渡花费时间。持续时间第二个时间才是过渡延迟时间。
transition-timing-function 属性可以使用的属性值
ease | 规定过渡效果,先缓慢开始,然后加速,然后缓慢的结束(默认) |
linear | 从开始到结束具有相同速度的过渡效果,匀速运动 |
ease-in | 缓慢开始,加速运动 |
ease-out | 缓慢结束,减速运动 |
ease-in-out | 以慢速开始和结束的过渡效果 |
cubic-bezier(n,n,n,n) | 允许你在三次贝塞尔函数中定义自己的值 |
step(n) | 分步执行 |
案列展示:
<!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>Document</title>
<style>
.contain {
width: 132px;
height: 271px;
background-color: pink;
margin: 100px