CSS動畫是創建視覺動畫的絕佳方式,不僅限於CSS過渡的單一移動,而且更加細緻。使用 animation
屬性將動畫應用於元素
介紹
使用 animation
屬性將動畫應用於元素。
.container {
animation: spin 10s linear infinite;
}
spin
是動畫的名稱,我們需要單獨定義它。我們還告訴CSS使動畫持續10秒,以線性方式執行(速度不加速或有任何差異),並無限重複播放。
您必須使用 關鍵幀(keyframes) 定義動畫的工作方式。以下是旋轉項目的動畫示例:
@keyframes spin {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}
在 @keyframes
定義中,您可以擁有任意多個中間點。
在這種情況下,我們告訴CSS將變換屬性將Z軸從0度旋轉到360度,完成完整的循環。
您可以在此處使用任何CSS變換。
請注意,這並不影響動畫應該持續的時間間隔。這是在使用 animation
時定義的。
CSS動畫示例
我想畫出四個圓,起點都在一個公共點,彼此相距90度。
<div class="container">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="circle four"></div>
</div>
body {
display: grid;
place-items: center;
height: 100vh;
}
.circle {
border-radius: 50%;
left: calc(50% - 6.25em);
top: calc(50% - 12.5em);
transform-origin: 50% 12.5em;
width: 12.5em;
height: 12.5em;
position: absolute;
box-shadow: 0 1em 2em rgba(0, 0, 0, 0.5);
}
.one,
.three {
background: rgba(142, 92, 205, 0.75);
}
.two,
.four {
background: rgba(236, 252, 100, 0.75);
}
.one {
transform: rotateZ(0);
}
.two {
transform: rotateZ(90deg);
}
.three {
transform: rotateZ(180deg);
}
.four {
transform: rotateZ(-90deg);
}
您可以在這個Glitch中看到它們: https://glitch.com/edit/#!/flavio-css-circles
讓我們使這個結構(所有圓圈)旋轉。為此,我們在容器上應用一個旋轉為360度的動畫:
@keyframes spin {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}
.container {
animation: spin 10s linear infinite;
}
在 https://glitch.com/edit/#!/flavio-css-animations-tutorial 上查看它
您可以添加其他關鍵幀以獲得更有趣的動畫:
@keyframes spin {
0% {
transform: rotateZ(0);
}
25% {
transform: rotateZ(30deg);
}
50% {
transform: rotateZ(270deg);
}
75% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(360deg);
}
}
在 https://glitch.com/edit/#!/flavio-css-animations-four-steps 上查看示例
CSS動畫屬性
CSS動畫提供了許多不同的參數可以進行調整:
屬性 | 描述 |
---|---|
animation-name |
動畫的名稱,引用使用 @keyframes 創建的動畫 |
animation-duration |
動畫持續時間,以秒為單位 |
animation-timing-function |
動畫使用的時間函數(常見值:linear ,ease )。默認值:ease |
animation-delay |
開始動畫之前等待的秒數,可選 |
animation-iteration-count |
動畫應該重複執行的次數。可以是數字或“無窮”。默認值:1 |
animation-direction |
動畫的方向。可以是normal ,reverse ,alternate 或alternate-reverse 。在後兩者中,它在前進後退之間交替 |
animation-fill-mode |
定義在動畫結束後,按照其迭代計數數量完成後如何設置元素的樣式。none 或 backwards 回到第一個關鍵幀的樣式。forwards 和 both 使用在最後關鍵幀中設置的樣式 |
animation-play-state |
如果設置為 paused ,則暫停動畫。默認值為 running |
animation
屬性是所有這些屬性的縮寫,按照以下順序進行:
.container {
animation: name duration timing-function delay iteration-count direction
fill-mode play-state;
}
這是我們上面使用的示例:
.container {
animation: spin 10s linear infinite;
}
用於CSS動畫的JavaScript事件
使用JavaScript可以(監聽)以下事件:
animationstart
animationend
animationiteration
請小心使用 animationstart
,因為如果動畫在頁面加載時開始,您的JavaScript代碼始終在CSS處理後執行,因此動畫已經開始,並且無法攔截事件。
const container = document.querySelector('.container')
container.addEventListener(
'animationstart',
(e) => {
//做某事
},
false
)
container.addEventListener(
'animationend',
(e) => {
//做某事
},
false
)
container.addEventListener(
'animationiteration',
(e) => {
//做某事
},
false
)
可以使用CSS動畫來製作的屬性
非常多!它們與CSS過渡中可以動畫的屬性相同。
以下是完整的列表:
屬性 |
---|
background |
background-color |
background-position |
background-size |
border |
border-color |
border-width |
border-bottom |
border-bottom-color |
border-bottom-left-radius |
border-bottom-right-radius |
border-bottom-width |
border-left |
border-left-color |
border-left-width |
border-radius |
border-right |
border-right-color |
border-right-width |
border-spacing |
border-top |
border-top-color |
border-top-left-radius |
border-top-right-radius |
border-top-width |
bottom |
box-shadow |
caret-color |
clip |
color |
column-count |
column-gap |
column-rule |
column-rule-color |
column-rule-width |
column-width |
columns |
content |
filter |
flex |
flex-basis |
flex-grow |
flex-shrink |
font |
font-size |
font-size-adjust |
font-stretch |
font-weight |
grid-area |
grid-auto-columns |
grid-auto-flow |
grid-auto-rows |
grid-column-end |
grid-column-gap |
grid-column-start |
grid-column |
grid-gap |
grid-row-end |
grid-row-gap |
grid-row-start |
grid-row |
grid-template-areas |
grid-template-columns |
grid-template-rows |
grid-template |
grid |
height |
left |
letter-spacing |
line-height |
margin |
margin-bottom |
margin-left |
margin-right |
margin-top |
max-height |
max-width |
min-height |
min-width |
opacity |
order |
outline |
outline-color |
outline-offset |
outline-width |
padding |
padding-bottom |
padding-left |
padding-right |
padding-top |
perspective |
perspective-origin |
quotes |
right |
tab-size |
text-decoration |
text-decoration-color |
text-indent |
text-shadow |
top |
transform. |
vertical-align |
visibility |
width |
word-spacing |
z-index |