首頁 網頁資源RESOURCES CSS
分享幾個簡易的CSS動畫

分享幾個簡易的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;
    }
}
其他類別