Css动画公式集锦

admin

放大缩小:
animation:flash ease-in-out infinite 5s;

@keyframes scaleDraw {
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(1.1);
    }
    50%{
        transform: scale(1);
    }
    75%{
        transform: scale(1.1);
    }
}

admin

涟漪扩散：
animation: living 3s linear infinite;

@keyframes living {
    0%{
        transform: scale(1);
        opacity: 0.5;  
    }
    50%{
        transform: scale(1.5);  
        opacity: 0;   /*圆形放大的同时，透明度逐渐减小为0*/
    }
    100%{
        transform: scale(1);
        opacity: 0.5;
    }
}

admin

叠加，用于两图片交互显示：
animation: picDraw 5s ease-in-out infinite;

@keyframes picDraw {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

来源：https://blog.csdn.net/yujin0213/article/details/79262825