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

其他類別