css3实现过渡动画效果教程，菜鸟必看！
CSS3过渡是元素从一种样式逐渐改变为另外一种的效果,可以实现元素不同状态间的平滑过渡（当元素从一个状态进入到另一个状态时），经常来制作一些动画效果。也就是说过渡想要看到效果得有2个状态,1个是初始状态,1个是结束状态。初始状态就是我们书写的css样式,那么问题就来了,结束状态需要书写在哪里呢?对了,就是书写在:hover或者:checked等这些选择器配合。
在之前我们书写一些效果的时候,比如书写一个:hover状态的效果,它是直接展示效果的,也就是说从开始状态到结束状态,是瞬间完成的,中间过程几乎不可见.
<!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>
*{
margin: 0;
padding: 0;
}
/* 盒子的初始状态 */
.box{
width: 100px;
height: 100px;
font-size: 20px;
color: yellow;
background: green;
}
/* 盒子的鼠标经过结束状态 */
.box:hover{
width: 1200px;
}
</style>
</head>
<body>
<div class="box">千锋教育</div>
</body>
</html>CSS3的过渡属性,可以看到一个元素从开始状态到结束状态的中间过程
<!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>
*{
margin: 0;
padding: 0;
}
/* 盒子的初始状态 */
.box{
width: 100px;
height: 100px;
font-size: 20px;
color: yellow;
background: green;
/* 添加过渡属性效果 */
transition: width 2s linear;
}
/* 盒子的鼠标经过结束状态 */
.box:hover{
width: 1200px;
}
</style>
</head>
<body>
<div class="box">千锋教育</div>
</body>
</html>具体语法书写有2种,一种是单独设置,一种是复合简写.
单独设置写法如下
- transition-property 规定应用过渡的 CSS 属性的名称。
- transition-duration 定义过渡效果花费的时间,默认是 0,单位是秒s 或者是毫秒 ms.
- transition-delay 规定过渡效果的延迟时间,默认是 0,单位是秒s 或者是毫秒 ms.
- transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。这个时间曲线有很多,有linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)
| 值 | 描述 |
|---|---|
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果规定慢速开始，然后变快，然后慢速的过渡效果 |
| ease-in | 规定以慢速开始的过渡效果 |
| ease-out | 规定以慢速结束的过渡效果 |
| ease-in-out | 规定以慢速开始和结束的过渡效果 |
| linear | 规定以相同速度开始至结束的过渡效果 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
| steps() | 指定了时间函数中的间隔数量（步长） |
简写设置写法如下
transition: property duration timing-function delay;
THE END
