Question

我正在制作一个从左向右移动的箭头，然后转动180度并从右向左移动。出于某些原因，当使用 CSS旋转转动箭头时，箭头的位置会向上移动一点。移动箭头时如何保持位置相同？箭头是图像元素。

还有如何使用CSS3关键帧顺利旋转箭头？

.bg {
  width: 24px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: blue;
}

.arrow {
  width: 24px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-name: moveRightToLeft;
  animation-name: moveRightToLeft;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.arrow img {
  max-width: 100%;
}

@keyframes moveRightToLeft {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0, 0, 0);
    -ms-transform: rotateZ(0deg) translate3d(0, 0, 0);
    transform: rotateZ(0deg) translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: rotateZ(0deg) translate3d(70px, 0, 0);
    -ms-transform: rotateZ(0deg) translate3d(70px, 0, 0);
    transform: rotateZ(0deg) translate3d(70px, 0, 0);
    opacity: 1;
  }
  51% {
    -webkit-transform: rotateZ(0deg) translate3d(70px, 10px, 0);
    -ms-transform: rotateZ(0deg) translate3d(70px, 10px, 0);
    transform: rotateZ(0deg) translate3d(70px, 10px, 0);
  }
  53% {
    -webkit-transform: rotateZ(-180deg) translate3d(-70px, 10px, 0);
    -ms-transform: rotateZ(-180deg) translate3d(-70px, 10px, 0);
    transform: rotateZ(-180deg) translate3d(-70px, 10px, 0);
  }
  54% {
    -webkit-transform: rotateZ(-180deg) translate3d(-70px, 10px, 0);
    -ms-transform: rotateZ(-180deg) translate3d(-70px, 10px, 0);
    transform: rotateZ(-180deg) translate3d(-70px, 10px, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateZ(-180deg) translate3d(0, 10px, 0);
    -ms-transform: rotateZ(-180deg) translate3d(0, 10px, 0);
    transform: rotateZ(-180deg) translate3d(0, 0, 10px);
  }
}

<div class="bg"></div>
<div class="arrow">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Arrow_right.svg/2000px-Arrow_right.svg.png">
</div>

Answer 1

尝试将动画添加到箭头内的图像.div的宽度和高度会产生问题。还要将transform: rotateZ(-180deg) translate3d(-70px, 10px, 0);更改为transform: rotateZ(-180deg) translate3d(-70px, 0px, 0);

.bg{
width: 24px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: blue;
}
.arrow img{
  width: 24px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  
  -webkit-animation-delay: 2s;
                        animation-delay: 2s;
                        -webkit-animation-name: moveRightToLeft;
                        animation-name: moveRightToLeft;
                        -webkit-animation-duration: 3s;
                        animation-duration: 3s;
                        -webkit-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                        -webkit-animation-timing-function: linear;
                        animation-timing-function: linear;
}

.arrow img{
max-width: 100%;
}

@keyframes moveRightToLeft {
    0% {
        -webkit-transform: rotateZ(0deg) translate3d(0, 0, 0);
        -ms-transform: rotateZ(0deg) translate3d(0, 0, 0);
        transform: rotateZ(0deg) translate3d(0, 0, 0);
    }
    50% {
        -webkit-transform: rotateZ(0deg) translate3d(70px, 0, 0);
        -ms-transform: rotateZ(0deg) translate3d(70px, 0, 0);
        transform: rotateZ(0deg) translate3d(70px, 0, 0);
        opacity: 1;
    }
    51% {
        opacity: 0;
         -webkit-transform: rotateZ(0deg) translate3d(70px, 0px, 0);
        -ms-transform: rotateZ(0deg) translate3d(70px, 0px, 0);
        transform: rotateZ(0deg) translate3d(70px, 0px, 0);
    }
    53% {
        opacity: 0;
      -webkit-transform: rotateZ(-180deg) translate3d(-70px, 0px, 0);
        -ms-transform: rotateZ(-180deg) translate3d(-70px,0px, 0);
        transform: rotateZ(-180deg) translate3d(-70px,0px, 0);

    }
    54% {
        -webkit-transform: rotateZ(-180deg) translate3d(-70px, 10px, 0);
        -ms-transform: rotateZ(-180deg) translate3d(-70px, 0px, 0);
        transform: rotateZ(-180deg) translate3d(-70px, 0px, 0);
        opacity: 1;
    }
    100%{
     -webkit-transform: rotateZ(-180deg) translate3d(0, 0px, 0);
        -ms-transform: rotateZ(-180deg) translate3d(0,0px, 0);
        transform: rotateZ(-180deg) translate3d(0, 0,0px);
    }
    
}

<div class="bg"></div>
<div class="arrow">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Arrow_right.svg/2000px-Arrow_right.svg.png">
</div>

Answer 2

您可以尝试这样的事情：

.bg {
  width: 24px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: blue;
}

.arrow {
  width: 24px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  animation:moveRightToLeft 2s 3s infinite linear;
}

.arrow img {
  max-width: 100%;
}

@keyframes moveRightToLeft {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }
  50% {
    transform: rotate(0deg) translate(70px, 0);
  }
  50.1% {
    transform: rotate(-180deg) translate(-70px, -100%);
  }
  100% {
    transform: rotate(-180deg) translate(0, -100%);
  }
}

<div class="bg"></div>
<div class="arrow">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Arrow_right.svg/2000px-Arrow_right.svg.png">
</div>

CSS旋转创建箭头的摇动

2 个答案: