CSS3使用過度動畫和緩動效果案例講解
阿新 • • 發佈：2021-07-29
transition過渡：
四個小屬性
| 屬性 | 意義 |
|---|---|
| transition-property | 哪些屬性要過渡 |
| transition-duration | 動畫時間 |
| transition-timing-function | 動畫變化曲線（緩動效果） |
| transition-delay | 延遲時間 |
- transition過度屬性是3濃墨重彩的特性，過度可以為一個元素在不同樣式之間變化自動新增“補間動畫”
- 相容性IE10開始相容，移動端相容良好
- 曾幾何時，上的動畫特效基本都是由定時器實現的，現在逐步改為使用CSS3過度
- 優點：動畫更細膩，記憶體開銷小
- transition屬性有4個要素：
transition：width 1s linear 0s;（什麼屬性要過度、動畫時長、變化速度曲線、延遲時間）
<!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>動畫過渡</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: black;
transition: width 5s linear 0s;
}
.box:hover {
width: 500px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>就是需要過渡的的加屬性值transition，第一個值為變化的屬性
哪些屬性可以參與過渡
- 所有數值型別的屬性，都可以參與過渡，比如width、height、left、top、border-radius
- 背景顏色和文字顏色都可以被過渡
- 所有變形（包括2D和3D）都可以被過渡
all：
- 所有的屬性都要參與過渡，可以寫all
transition：all 5s linear 0s;
<!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>動畫過渡</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: black;
transition: width 5s linear 0s;
}
.box:hover {
width: 500px;
}
.box1{
width: 200px;
height: 200px;
background-color: blue;
transition: all 5s linear 0s;
}
.box1:hover {
width: 400px;
height: 200px;
background-color: greenyellow;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
過渡的緩動效果：
緩動引數
- transition的第三個引數就是緩動引數，也就是變化速度曲線
transition：width 1s linear 0s;
常用的緩動引數
子屬性
transition-timing-function：ease；
<!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>動畫過渡</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
border:1px solid black;
}
.box1 p{
width: 50px;
height: 50px;
background-color: blue;
position: relative;
http://www.cppcns.com left: 0;
margin-bottom: 10px;
transition: left 5s linear 0sOxACC;
}
.box1 p:nth-child(2) {
transition-timing-function: ease;
}
.box1 p:nth-child(3) {
transition-timing-function: ease-in;
}
.box1 p:nth-child(4) {
transition-timing-function: ease-out;
}
.box1 p:nth-child(5) {
transition-timing-function: ease-in-out;
}
.box1:hover p {
left: 100px;
}
</style>
</head>
<body>
<div class="box1">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>客棧
</body>
</html>
貝塞爾曲線：
- https://cubic-bezier.com/可以生成貝塞爾曲線，可以自定義動畫緩動引數
到此這篇關於CSS3使用過度動畫和緩動效果案例講解的文章就介紹到這了,更多相關CSS3使用過度動畫和緩動效果內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！