css 添加动画

 常见的css动画有两种

一种是只执行一次比如 鼠标 hover的时候添加动画

一种是重复执行的动画

示例1（触发只执行一次）

<div className="test"></div>



.test{
    width: 100px;
    height: 100px;
    background: #000;
    transition: all 2s;
    &:hover{
        background: #ccc;
    }
}

示例2（重复执行）

<div className="test"></div>



.test {
    width: 100px;
    height: 100px;
    background: #000;
    
    animation-name: rotate;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    animation-iteration-count: infinite;

    // 像淡入淡出就比较简单

    @keyframes rotate {
        0% {
            // transform: translateX(0px);
            opacity: 0;
        }
        
        50% {
           opacity: 1; 
        }

        100% {
            opacity: 0; 
            // transform: translateX(20px);
        }
    }
}