CSS过渡动画详解-优快云博客

本文链接：https://blog.youkuaiyun.com/ice_yr/article/details/100175582

属性	描述
transition	简写属性，用于在一个属性中设置四个过度属性
transition-property	规定应用过渡的css属性的名称
transition-duration	定义过渡效果花费的时间（默认为0）
transition-timing-function	规定过渡效果的时间曲线（默认是ease）
transition-delay	规定过渡效果何时开始（默认是0）

transition: 要过渡的属性花费时间运动曲线何时开始；

（transition-duration 花费时间单位是秒s ms为毫秒）

如果多组属性变化，还是用逗号隔开。
llinear 匀速
ease 渐慢
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速

运动曲线默认的是ease
何时开始默认的是0s 即刻开始
注意：transition 过渡的意思，这句话写在div里面而不是hover里面
（若放在hover里，当鼠标离开图像，缩回时没有过渡效果）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 200px;
			height: 100px;
			background-color: blue;
			/*transition: 要过渡的属性  花费时间  运动曲线  何时开始;*/ 
			/*transition: width 0.5s ease-in 0s, height 0.3s ease-in 1s;*/
			/*transition  过渡的意思，这句话写在div里面而不是hover里面*/
			transition: all 0.6s;  /*所有属性都变化有all即可 后面两个属性可以省略*/
		}
		div:hover {    /*鼠标经过盒子宽度变为400*/
			width: 600px;
			height: 600px;
		}
	</style> 
</head>
<body>
	<div></div>
</body>
</html>