2018.12.13過度動畫,過度 案例,盒子陰影,偽類設計邊框
##### opacity :0 隱藏 opacity :1顯示 影象佔位置,沒脫離文件流
```css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>動畫</title>
<style type="text/css">
.box {
width: 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 {
width: 800px;
height: 400px;
background-color: orange;
}
</style>
<style type="text/css">
.sup {
width: 800px;
height: 50px;
background-color: pink;
margin: 0 auto;
}
.sub {
width: 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>