CSS3 - 过渡动画
2019-03-31 本文已影响0人
Eren丶耶格尔
过渡（transition） 是 CSS3 中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，使元素从一个状态渐渐的过渡到另外一个状态时为元素添加效果。
语法格式：
transition：要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化, 用逗号隔开。
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
transition-property：如果想要所有的属性都变化过渡， 写一个all 就可以
transition-duration：花费时间单位是秒 s，比如 0.5s，这个s单位必须写，ms 毫秒
transition-timing-function：运动曲线，默认是 ease
transition-delay：何时开始，默认是 0s，立马开始
运动曲线示意图：
运动曲线示意图
案例一：
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 183px;
height: 130px;
border: 1px solid red;
overflow: hidden;
}
div img {
width: 193px;
height: 130px;
transition: all 0.4s;
}
div:hover img {
margin-left: -10px;
}
</style>
</head>
<body>
<div>
<img src="1.jpg" alt="">
</div>
</body>
</html>
效果图如下：
效果图
案例二：
模仿京东右侧边栏效果
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.subnav {
margin: 100px auto;
width: 20px;
}
.subnav li {
width: 20px;
height: 20px;
margin: 3px 0;
background-color: pink;
position: relative;
}
.subnav div {
position: absolute;
right: 0;
top: 0;
height: 20px;
width: 0;
background-color: purple;
transition: all 0.6s;
z-index: -1;
}
.subnav li:hover div {
width: 100px;
}
</style>
</head>
<body>
<div class="subnav">
<ul>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</ul>
</div>
</body>
</html>
效果图如下：
效果图
