Question

我遇到一个简单的CSS动画问题。

当我调用动画时：

 .animationSinistra {
  -webkit-animation: animazioneVersoSinistra 3s normal forwards;
  animation: animazioneVersoSinistra 3s normal forwards;
}

@-webkit-keyframes animazioneVersoSinistra {
  from {
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(70.5%,22%);
  }
  to {
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(-30%,10%);
  }
}

来自

  <script type="text/javascript">
      function animazioneSinistra(){
  document.getElementById('img1').className ='animationSinistra';

}

图像具有我对动画的想法，但在第一个瞬间（当我点击使动作开始的点时）图像变得更大。即使在部分中存在比例（1），为什么会发生呢？

这里是整个代码：

＆＃13;

<html>
<head>
  <style type="text/css">

  /* == Stili di base - Mobile first ===== */

  /*  Qui vanno gli stili per il mobile

  /* == Media queries (breakpoint) ===== */
  .imageAnimation {
    width:40%;
    height: 40%;
    left:30%;
    top:30%;
  }
  body{
    background-color: #F7F7F7
  }

  /* -----------------------------------
  IPAD PORTRAIT
  ------------------------------------ */
  @media only screen and (min-width: 768px) {
    .imageAnimation {
    width:40%;
    height: 40%;
    left:30%;
    top:30%;
  }
  body{
    background-color: #F7F7F7
  }
  }


  /* -----------------------------------
  IPAD LANDSCAPE + NETBOOK
  ------------------------------------ */
  @media only screen and (min-width: 1024px){
    .imageAnimation {
    transform: translate(52%,72%);
    width:50%;
    height: 40%;
    left:26%;
    top:30%;
  }

  .iconaAltoSinistra {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 30%;
    left: 30%;
  }
  .iconaAltoDestra {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 33%;
    left: 72%;
  }
  .iconaBassoDestra {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 64%;
    left: 69%;
  }

  .iconaBassoSinistra {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 64%;
    left: 28%;
  }

  body{
    background-color: #F7F7F7
  }
  }

  /* -----------------------------------
  DESKTOP
  ------------------------------------ */
  @media only screen and (min-width: 1200px){
      .imageAnimation {
        position: fixed;
        left:50vw;
        top:50vh;
        transform: translate(-50%,-50%);
        height: auto;
        width: auto;

  }
    .iconaAltoSinistra {
      position: absolute;
      width: 40px;
      height: 40px;
      top: 24%;
      left: 31%;
    }
    .iconaAltoDestra {
      position: absolute;
      width: 40px;
      height: 40px;
      top: 29%;
      left: 67%;
    }
    .iconaBassoDestra {
      position: absolute;
      width: 40px;
      height: 40px;
      top: 74%;
      left: 64%;
    }

    .iconaBassoSinistra {
      position: absolute;
      width: 40px;
      height: 40px;
      top: 70%;
      left: 30%;
    }

    .animationSinistra {
      -webkit-animation: animazioneVersoSinistra 3s normal forwards;
      animation: animazioneVersoSinistra 3s normal forwards;
    }

    @-webkit-keyframes animazioneVersoSinistra {
      from {
        -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(70.5%,22%);
      }
      to {
        -webkit-transform: rotate(0deg) scale(1.8) skew(0deg) translate(-30%,10%);
      }
    }


  body{
    background-color: #F7F7F7
  }
  }





  </style>

  <script type="text/javascript">
    function animazioneSinistra(){
      document.getElementById('img1').className ='animationSinistra';

    }
    function animazioneDestra(){
      document.getElementById('img').className ='animationDestra';
      document.getElementById('iconaAltoSinistra').className = 'animazioneAltoSinistra';

    }



  </script>
</head>

<body>
<img id = "img1" src="http://www.websocialagency.it/wp-content/uploads/2017/08/WhatsApp-Image-2017-08-30-at-19.47.35.jpeg" class="imageAnimation" alt="logo WebSocialAgency">
<img id = "img" src="http://www.websocialagency.it/wp-content/uploads/2017/08/WhatsApp-Image-2017-08-30-at-19.47.35.jpeg" class="iconaAltoSinistra" alt="logo WebSocialAgency">
<img id = "img" src="http://www.websocialagency.it/wp-content/uploads/2017/08/WhatsApp-Image-2017-08-30-at-19.47.35.jpeg" class="iconaAltoDestra" alt="logo WebSocialAgency" onclick="animazioneSinistra()">
<img id = "img" src="http://www.websocialagency.it/wp-content/uploads/2017/08/WhatsApp-Image-2017-08-30-at-19.47.35.jpeg" class="iconaBassoDestra" alt="logo WebSocialAgency">
<img id = "img" src="http://www.websocialagency.it/wp-content/uploads/2017/08/WhatsApp-Image-2017-08-30-at-19.47.35.jpeg" class="iconaBassoSinistra" alt="logo WebSocialAgency">
</body>

</html>

＆＃13;

调用css动画时，图像会变得更大

0 个答案: