動畫
搭配
@keyframes
使用
keyframes
宣告關鍵影格
html
<div class="block"></div>
scss
.block {
width: 100px;
height: 100px;
position: fixed;
top: 10px;
left: 10px;
background: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
.run {
animation-name: move;
animation-duration: 3s;
}
}
@keyframes move {
from {
left: 10px;
}
to {
left: 300px;
}
}
from
等同 0%
to
等同 100%
多關鍵影格
除了使用 from
與 to
來表示
也可以使用百分比的方式來將細節更完善
scss
@keyframes move {
0% {
left: 10px;
}
20% {
top: 100px;
transform: rotate(180deg);
}
50% {
top: 150px;
transform: rotate(360deg) scale(2);
}
100% {
left: 300px;
}
}
動畫名稱
animation-name
使用 @keyframes
.run {
animation-name: move;
}
動畫時間
animation-duration
動畫執行時間
.run {
animation-duration: 3s;
animation-duration: 3000ms;
}
動畫延遲
animation-delay
動畫延遲時間
.run {
animation-delay: 3s;
animation-delay: 3000ms;
}
動畫速度曲線
animation-timing-function
.linear {
animation-timing-function: linear;
}
.ease {
animation-timing-function: ease;
}
.ease-in {
animation-timing-function: ease-in;
}
.ease-out {
animation-timing-function: ease-out;
}
.ease-in-out {
animation-timing-function: ease-in-out;
}
.cubic-bezier {
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.steps {
animation-timing-function: steps(3, start);
}
.step-start {
animation-timing-function: step-start;
}
.step-end {
animation-timing-function: step-end;
}
.initial {
animation-timing-function: initial;
}
.inherit {
animation-timing-function: inherit;
}
執行次數
animation-iteration-count
預設一次,infinite
表示不停止
播放方向
animation-direction
順向
0% -> 100%,預設值
.normal {
animation-direction: normal;
}
逆向
100% -> 0%
.reverse {
animation-direction: reverse;
}
輪播
奇數 0% -> 100%,偶數 100% -> 0%
參考播放次數 animation-iteration-count
.alternate {
animation-direction: alternate;
}
逆向輪播
奇數 100% -> 0%,偶數 0% -> 100%
參考播放次數 animation-iteration-count
.alternate-reverse {
animation-direction: alternate-reverse;
}
模式
動畫結束後模式
預設
動畫停留在當下樣式
.none {
animation-fill-mode: none;
}
最後影格
動畫停留在最後影格
.forwards {
animation-fill-mode: forwards;
}
開始影格
動畫停留在開始影格,搭配 animation-delay
才看得出效果
.backwards {
animation-fill-mode: backwards;
}
開始最後影格
結合 forwards
與 backwards
特性
.both {
animation-fill-mode: both;
}
綜合練習
藍天
body {
background: rgb(49, 141, 216);
}
建立雲朵
.cloud {
width: 500px;
height: 120px;
border-radius: 1000px;
background: #fff;
position: absolute;
top: 200px;
left: 0;
&::after {
content: '';
position: absolute;
width: 100px;
height: 100px;
border-radius: 100px;
background: #fff;
top: -50px;
left: 100px;
}
&::before {
content: '';
position: absolute;
width: 230px;
height: 200px;
border-radius: 300px;
background: #fff;
top: -100px;
left: 190px;
}
}
建立影格
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 100%;
}
}
套用動畫
.cloud {
// ...
animation-name: move;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
// ...
}
大小雲朵
.xl {
transform: scale(1.2);
}
.small {
transform: scale(0.5);
}
時間差異
animation-duration