CSS3中transition过渡效果
CSS3 过渡
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
transition 过渡为一个元素在不同的状态之间切换的时候定义过渡的效果
例如 伪元素 :hover :active
transition 是一个复合属性
格式：transition: property duration function delay
div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
过渡属性
下表列出了所有的过渡属性：
| transition | 为一个元素在不同的状态之间切换的时候定义过渡的效果 |
| transition-property | 进行过渡效果的属性名 取值可以取多个，多个属性值之间用逗号隔开 all 指全部属性 none 不设过渡动画 |
| transition-duration | 过渡动画的时间 取值可以取多个，多个属性值之间用逗号隔开，每个时间都会应用到对应的属性上，取值不可为负数，0s则不会出现过渡动画 |
| transition-timing-function | 过渡动画的效果，规定过渡效果的时间曲线 linear 线性 ease ease-in ease-out ease-in-out |
| transition-delay | 过渡动画的延迟（意为，等待一段时间后，再执行动画） |
可动画属性列表：
- 属性类 width height opacity
- 盒模型 margin padding border-width border-color border-radius box-shadow
- 定位类 top right bottom left
- 字体类 font-size font-weight color text-shadow
- 变换类 transform
下面来看一下实际案例吧！图片的话自己换：
<!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>
.bignav{
width: auto;
height:750px;
background-color: rgb(255, 255, 255);
top: 0%;
}
.boxnav{
width: auto;
height: 500px;
background-color: rgb(255, 255, 255);
margin: 0 5px;
padding-top: 5px;
}
.lognav{
width: 200px;
height: 60px;
/* background-color: rgb(255, 252, 249); */
padding: 10px 0 10px 20px;
}
.lognavfont{
line-height: 50px;
font-weight: bold;
padding-top: 10px;
padding-left: 15px;
float: left;
background-repeat: no-repeat;
background-position: top left;
font-size: 30px;
}
.smallnavtop{
display: flex;
width: 1200px;
height: 400px;
}
.smallnav{
width: 220px;
height: 300px;
background-color: rgb(255, 255, 255);
margin: 10px 10px 10px 50px;
float: left;
position: relative;
flex: 1;
overflow: hidden;
}
.smallnav img{
width: 220px;
height: 100%;
}
.smallnav a{
position: absolute;
top: 100%;
left: 0;
width: 180px;
height: 100%;
padding: 120px 20px 0px;
background-color: rgba(0, 0, 0, .3);
transition: all 0.5s;
}
.smallnav a p{
margin-bottom: 10px;
font-size: 18px;
font-weight: 700px;
display: block;
color: rgb(255, 255, 255);
font-size: 30px;
text-decoration: none;
padding: 2px 2px;
}
.smallnav:hover a{
top: 0;
color: rgb(255, 255, 255);
font-size: 14px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="bignav">
<div class="boxnav" style="background-image: url(img/wrapper_backBg_02.png);">
<div class="barnav">
<div class="lognav">
<span class="lognavfont" style="background-image: url(img/log.png);">特别关注</span>
</div>
</div>
<div class="">
<div class="smallnav">
<img src="img/03.jpg" alt="">
<a href="#">
<p>小央视频</p>
<span>央视频原创视频子品牌，以更加贴切年轻人的视角，有趣，有料，有故事的方式解读时代。</span>
</a>
</div>
<div class="smallnav">
<img src="img/04.jpg" alt="">
<a href="#">
<p>小央视频</p>
<span>央视频原创视频子品牌，以更加贴切年轻人的视角，有趣，有料，有故事的方式解读时代。</span>
</a>
</div>
<div class="smallnav">
<img src="img/05.jpg" alt="">
<a href="#">
<p>小央视频</p>
<span>央视频原创视频子品牌，以更加贴切年轻人的视角，有趣，有料，有故事的方式解读时代。</span>
</a>
</div>
<div class="smallnav">
<img src="img/06.jpg" alt="">
<a href="#">
<p>小央视频</p>
<span>央视频原创视频子品牌，以更加贴切年轻人的视角，有趣，有料，有故事的方式解读时代。</span>
</a>
</div>
<div class="smallnav">
<img src="img/07.jpg" alt="">
<a href="#">
<p>小央视频</p>
<span>央视频原创视频子品牌，以更加贴切年轻人的视角，有趣，有料，有故事的方式解读时代。</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>运行效果：
它是如何工作？
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
你学会了吗？