css3过渡动画
2019-01-21 本文已影响0人
让思念入土
过渡动画： 是从一个状态 渐渐的过渡到另外一个状态，经常和 :hover 一起 搭配使用。
语法格式：
transition： 要过渡的属性 花费时间 运动曲线 何时开始
transition
简写属性，用于在一个属性中设置四个过渡属性。
transition-property
规定应用过渡的 CSS 属性的名称。
transition-duration
定义过渡效果花费的时间。默认是 0。
transition-timing-function
规定过渡效果的时间曲线。默认是 "ease"。
transition-delay
规定过渡效果何时开始。默认是 0。
如果想要所有的属性都变化过渡， 写一个all 就可以。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 400px;
height: 150px;
background-color: pink;
/*1. transition: 要过渡的属性 花费时间 运动曲线 何时开始;*/
/*2. 如果有多组属性，我们用逗号隔开*/
/*transition: width 1s ease 0s, height 1s ease 0s, background-color 1s ease 0s;*/
/*3. all 所有属性都会变化*/
/*transition: all 1s ease 0s;*/
/*4. 过渡写到本身上，而不是 hover里面*/
/*transition: all 0.5s;*/
/*5. 扩展，可以设置不同时进行的动画*/
transition:width 1s , height 1s linear 1s, background-color 1s;
}
div:hover {/* 鼠标经过盒子，我们的宽度变宽400，高度变高100 颜色变为purple */
width: 800px;
height: 250px;
background-color: purple;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
