##### opacity :0 隐藏 opacity :1显示 图像占位置,没脱离文档流
```css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
.box {
200px;
height: 200px;
background-color: red;
/*通过过渡完成动画*/
/*transition: 1s;*/
/*过渡的持续时间*/
transition-duration: 2s;
/*延迟时间*/
transition-delay: 50ms;
/*过渡属性*/
/*单一属性 | 属性1, ..., 属性n | all*/
transition-property: all;
/*过渡曲线*/
/*cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear*/
transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34);
}
.box:hover {
800px;
height: 400px;
background-color: orange;
}
</style>
<style type="text/css">
.sup {
800px;
height: 50px;
background-color: pink;
margin: 0 auto;
}
.sub {
50px;
height: 50px;
background-color: orange;
/*整体设置: 注意点 第一个时间为过渡时间, 第二个为延迟时间,可以省略, 运动曲线和运动属性可以省略,位置也不做要求*/
/*transition: .1s 1s all ease;*/
transition: .7s ease-in-out;
/*display: none;*/
/*opacity: 0;*/
}
.sup:hover .sub {
/*margin-left: auto;*/
/*display: block;*/
/*opacity: 1;*/
margin-left: calc(100% - 50px);
}
/*结论:*/
/*1.尽量悬浮静止的盒子, 控制运动的盒子*/
/*2.不能确定区间范围的属性值, 不会产生动画效果*/
/*display 不能做动画 | opacity可以做动画*/
</style>
</head>
<body>
<!-- 案例 -->
<div class="sup">
<div class="sub"></div>
</div>
<!-- 动画: 从一种状态渐变(非瞬变)到另一种状态 -->
<!-- HTML5如何实现动画: transition(过渡) | animation(动画) -->
<div class="box"></div>
</body>
</html>