主页 › 网页制作 › Css动画公式集锦

admin 发表于 2018-11-22 13:47:10

Css动画公式集锦

放大缩小:
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 发表于 2018-11-22 13:49:54

涟漪扩散：
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 发表于 2018-11-22 13:53:19

叠加，用于两图片交互显示：
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

查看完整版本: Css动画公式集锦