【CSS动画模式】发光/漂浮/呼吸/渐变

几个简单的Demo，先附效果图：

效果图：

相关属性：

• 0%和100%(等同于from和to)表示这个动画从开始到结束

代码：

<style>
    .move1{
        animation: mymove1 5s infinite  
    }
    .move2{
        animation: mymove2 1.5s infinite linear;
    }
    .move3{
        animation: mymove3 1.5s infinite linear;
    }
    .move4{
        animation: mymove4 1.5s infinite linear;
    }
    /* 发光 */
    @keyframes mymove1 {
        from {
        -webkit-box-shadow: 0 0 9px rgb(70, 191, 228);
        }
        50% {
        -webkit-box-shadow: 0 0 18px #88f1ff;
        }
        to {
        -webkit-box-shadow: 0 0 9px rgb(49, 209, 62);
        }
    }
    /* 漂浮 */
    @keyframes mymove2 {
        0% {
            transform: translate3d(0, 0%, 0);
        }
        25% {
            transform: translate3d(0, 5%, 0);
        }
        75% {
            transform: translate3d(0, -5%, 0);
        }
        100% {
            transform: translate3d(0, 0%, 0);
        }
    }
    /* 呼吸 */
    @keyframes mymove3 {
        0% {
            transform: scale(1);
        }
        25% {
            transform: scale(1.1);
        }
        75% {
            transform: scale(0.9);
        }
        100% {
            transform: scale(1);
        }
    }
    /* 渐变 */
    @keyframes mymove4 {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
</style>
<div>
    <div class="move1">发光动画</div>
    <div class="move2">漂浮动画</div>
    <div class="move3">呼吸动画</div>
    <div class="move4">渐变动画</div>
</div>