css3圖片放大縮小過度動畫

(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);
    }
  }

 

發佈了26 篇原創文章 · 獲贊 16 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章