分享幾個簡易的CSS動畫
2021.02.09
分享一些簡單的CSS動畫
淡入
展示
HTML
<div class="shape-ex1"></div>
CSS
.shape-ex1{
width: 100px;
height: 100px;
background-color: #666;
margin: 0 auto;
animation: fade 2s linear 0s infinite;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
淡出
展示
HTML
<div class="shape-ex2"></div>
CSS
.shape-ex2{
width: 100px;
height: 100px;
background-color: #666;
margin: 0 auto;
animation: fadeOut 2s linear 0s infinite;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
左邊進入
展示
HTML
<div class="shape-ex3"></div>
CSS
.shape-ex3{
width: 100px;
height: 100px;
background-color: #666;
margin: 0 auto;
animation: leftIn 2s linear 0s infinite;
}
@keyframes leftIn {
from {
transform: translate3d(-20%, 0, 0);
}
to {
transform: none;
}
}
右邊進入
展示
HTML
<div class="shape-ex4"></div>
CSS
.shape-ex4{
width: 100px;
height: 100px;
background-color: #666;
margin: 0 auto;
animation: rightIn 2s linear 0s infinite;
}
@keyframes rightIn {
from {
transform: translate3d(20%, 0, 0);
}
to {
transform: none;
}
}