Question

我有以下代码，使飞机的图像从页面的左侧进入，降落...直线行驶800像素，然后从页面的另一侧再次起飞。

但是我得到的是每个百分比之间的混混。

是否有足够的空间来平滑关键帧之间的过渡。

@keyframes plane-right {


    0% {
        visibility:visible;
        transform: translate(-2000px, -400px) rotate(-20deg) scaleX(-1);

    }
    40% {
        visibility:visible;
        transform: translate(-400px, -0px) rotate(-0deg) scaleX(-1);
    }
    60% {
        visibility:visible;
        transform: translate(400px, -0px) rotate(-5deg) scaleX(-1);
    }

    100% {
        visibility:visible;
        transform: translate(2000px, -400px) rotate(-40deg) scaleX(-1);
    }
}

Answer 1

在图像标签中添加以下动画定时属性，这将有所帮助

transform-origin:50px 5px;
transition:transform 1s ease-in-out 0s;
animation-duration: 2.2s;
animation-name: paragato;
animation-iteration-count: infinite;
animation-direction: alternate;    
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;

Answer 2

添加动画持续时间和动画定时功能以控制动画的长度和定时（平滑度）。

.plane-right-div {
  width: 100px;
  height: 70px;
  background-color: #bada55;
  border-radius: 5px;
  animation-name: plane-right;
  animation-duration: 6s;
  animation-timing-function: ease;
}

@keyframes plane-right {
  0% {
    visibility: visible;
    transform: translate(-2000px, -400px) rotate(-20deg) scaleX(-1);
  }
  40% {
    visibility: visible;
    transform: translate(-400px, -0px) rotate(-0deg) scaleX(-1);
  }
  60% {
    visibility: visible;
    transform: translate(400px, -0px) rotate(-5deg) scaleX(-1);
  }
  100% {
    visibility: visible;
    transform: translate(2000px, -400px) rotate(-40deg) scaleX(-1);
  }
}

<div class="plane-right-div"></div>

如何平滑CSS关键帧之间的过渡

2 个答案: