Css Block

动画

基本动画


<div class="animation">
    <div class="box" style="background-color:#ff4f4f"></div>
    <div class="box" style="background-color:#68b1ed"></div>
    <div class="box" style="background-color:#3eaf7c"></div>
</div>
1
2
3
4
5
.animation {
    display: flex;
}
.animation .box {
    width: 100px;
    animation: stretch 2s linear infinite backwards;
}
@keyframes stretch {
    0% {
        height: 0px;
    }
    50% {
        height: 200px;
    }
    100% {
        height: 0px;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

延迟动画


.animation .box:nth-child(2) {
    animation-delay: 0.5s;
} 
.animation .box:nth-child(3) {
    animation-delay: 1s;
}
1
2
3
4
5
6

暂停与继续


.animation .box:hover {
    animation-play-state: paused;
}
1
2
3

交替

用 animation-direction: alternate 属性实现循环 

.animation .box {
    width: 100px;
    animation: stretch 1s linear infinite alternate backwards;
}
@keyframes stretch {
    0% {
        height: 0px;
    }
    100% {
        height: 200px;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

← 滚动条 →