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

.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;
    }
}

.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;
    }
}

.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;
    }
}