css3图片放大缩小过度动画

郅菇凉

于 2020-01-13 17:42:09 发布

阅读量2.6k

点赞数 3

分类专栏：前端css 文章标签： css3 动画

本文链接：https://blog.youkuaiyun.com/qq_24612793/article/details/103961820

版权

前端css 专栏收录该内容

5 篇文章

订阅专栏

（1）需要加动画的节点

 .lucky_h_img {
      animation: mymove 3s infinite;
      -webkit-animation: mymove 3s infinite; /*Safari and Chrome*/
      animation-direction: alternate; /*轮流反向播放动画。*/
      animation-timing-function: ease-in-out; /*动画的速度曲线*/
      /* Safari 和 Chrome */
      -webkit-animation: mymove 3s infinite;
      -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
      -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    }

（2） css3动画

@keyframes mymove {
    0% {
      transform: scale(1); /*开始为原始大小*/
    }
    25% {
      transform: scale(1.2); /*放大1.1倍*/
    }
    50% {
      transform: scale(1);
    }
    75% {
      transform: scale(1.2);
    }
  }

  @-webkit-keyframes mymove /*Safari and Chrome*/ {
    0% {
      transform: scale(1); /*开始为原始大小*/
    }
    25% {
      transform: scale(1.2); /*放大1.1倍*/
    }
    50% {
      transform: scale(1);
    }
    75% {
      transform: scale(1.2);
    }
  }