溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹如何在css3中使用animation屬性，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
animation-name 動畫名稱，可以有多個值，用逗號隔開，表示綁定了多個動畫
animation-name屬性為動畫指定一個名稱
animation-name兼容主流的瀏覽器，不過還是需要加前綴去兼容
animation-name有兩個屬性值，分別是keyframename和none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0 auto;
background:#abcdef;
}
div{
width:800px;
height:800px;
margin:0 auto;
}
.container{
position: relative;
}
.inner, .middle, .outer, .pic{
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.inner{
background:url(source/circle_inner.jpg) center no-repeat;
animation-name:circle_inner;
}
.middle{
background:url(source/circle_middle.jpg) center no-repeat;
animation-name:circle_middle;
}
.outer{
background:url(source/circle_outer.jpg) center no-repeat;
animation-name:circle_outer;
}
.pic{
background:url(source/pic.jpg) center no-repeat;
}
</style>
</head>
<body>
<div class="container">
<div class="inner"></div>
<div class="middle"></div>
<div class="outer"></div>
<div class="pic"></div>
</div>
</body>
</html>animation-duration 動畫持續時間 默認是0
animation-timing-function 動畫時間函數
animation-delay 動畫延遲時間
animation-delay 屬性定義動畫什么時候開始，單位可以是秒（s）或毫秒（ms），允許負值，-2s使動畫馬上開始，但會跳過2s進入動畫
animation-iteration-count 動畫循環次數
animation-iteration-count: number | infinite 默認為1
animation-direction: normal | reverse | alternate | alternate-reverse 正常； 反向； 正反交替； 反正交替
alternate 和 alternate-reverse ，如果animation-itreation-count 不是設置成 infinite ，則只會執行一次就停止
animation-fill-mode 動畫延遲未執行時，或者動畫執行完畢后的停留狀態（動畫不能設置為循環，否則無法停止）
animation-fill-mode: none | forwards | backwards | both 無 結束狀態 開始狀態 看情況
animation-play-state: running | paused 動畫運行狀態：運行 | 暫停
animation 簡寫
animation: name duration timing-function delay iteration-count direction fill-mode play-state
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0 auto;
background:#abcdef;
}
div{
width:800px;
height:800px;
margin:0 auto;
}
.container{
position: relative;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.inner, .middle, .outer, .pic{
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.container:hover div{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-ms-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
.inner{
background:url(source/circle_inner.jpg) center no-repeat;
/*循環*/
-webkit-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
-moz-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
-ms-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
-o-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
animation:circle_inner 10s ease-in-out 1s infinite alternate running;
/*不循環，填充效果*/
/*-webkit-animation:circle_inner 10s ease-in-out 1s forwards running;
-moz-animation:circle_inner 10s ease-in-out 1s forwards running;
-ms-animation:circle_inner 10s ease-in-out 1s forwards running;
-o-animation:circle_inner 10s ease-in-out 1s forwards running;
animation:circle_inner 10s ease-in-out 1s forwards running;*/
}
.middle{
background:url(source/circle_middle.jpg) center no-repeat;
-webkit-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
-moz-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
-ms-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
-o-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
animation:circle_middle 10s ease-in-out 1s infinite alternate running;
}
.outer{
background:url(source/circle_outer.jpg) center no-repeat;
-webkit-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
-moz-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
-ms-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
-o-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
animation:circle_outer 10s ease-in-out 1s infinite alternate running;
}
.pic{
background:url(source/pic.jpg) center no-repeat;
}
@keyframes circle_inner{
0%{ transform:rotateX(0deg); }
50%{ transform:rotateX(90deg); }
100%{ transform:rotateX(360deg); }
}
@keyframes circle_middle{
0%{ transform:rotateY(0deg); }
50%{ transform:rotateY(90deg); }
100%{ transform:rotateY(360deg); }
}
@keyframes circle_outer{
0%{ transform:rotateZ(0deg); }
50%{ transform:rotateZ(90deg); }
100%{ transform:rotateZ(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class="inner"></div>
<div class="middle"></div>
<div class="outer"></div>
<div class="pic"></div>
</div>
</body>
</html>
動畫性能優化：
用position-fixed代替background-attachment
帶圖片的元素放在偽元素中
will-change
兼容性IE13+ 感覺可以放棄了……
向下提示箭頭效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0 auto;
background:#abcdef;
}
div{
width:30px;
height:30px;
position: fixed;
left:0;
right:0;
bottom:100px;
margin:0 auto;
cursor:pointer;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-animation:upDown 2s ease-in-out infinite;
-moz-animation:upDown 2s ease-in-out infinite;
-ms-animation:upDown 2s ease-in-out infinite;
-o-animation:upDown 2s ease-in-out infinite;
animation:upDown 2s ease-in-out infinite;
}
@-webkit-keyframes upDown{
0%{ bottom:100px; }
50%{ bottom:80px; }
100%{ bottom:100px; }
}
@-moz-keyframes upDown{
0%{ bottom:100px; }
50%{ bottom:80px; }
100%{ bottom:100px; }
}
@-ms-keyframes upDown{
0%{ bottom:100px; }
50%{ bottom:80px; }
100%{ bottom:100px; }
}
@-o-keyframes upDown{
0%{ bottom:100px; }
50%{ bottom:80px; }
100%{ bottom:100px; }
}
@keyframes upDown{
0%{ bottom:100px; }
50%{ bottom:80px; }
100%{ bottom:100px; }
}
</style>
</head>
<body>
<div>></div>
</body>
</html>關于如何在css3中使用animation屬性就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
