Question

我有一个背景（云），我想对其进行水平动画处理。如果我从最左边的位置开始动画，那么动画是平滑的，但是如果我从中间位置开始动画，则动画会突然变化。

我知道它为什么会这样，但是却不知道如何使其平滑。

从中间开始时突然出现：

<div class="trt-clouds-1"></div>

   public function changepassword()
{
    return view('admin.changepassword');
}

public function chkPassword(Request $request){
    $data = $request->all();
    $adminCount = Admin::where(['username' => Session::get('adminSession'),'password'=>md5($data['current_pwd'])])->count(); 
        if ($adminCount == 1) {
            echo "true"; die;
        } else {
            echo "false"; die;
        }

}

public function updatePassword(Request $request){
    if($request->isMethod('post')){
        $data = $request->all();
        $adminCount = Admin::where(['username' => Session::get('adminSession'),'password'=>md5($data['current_pwd'])])->count();

        if ($adminCount == 1) {
            $password = md5($data['new_pwd']);
            Admin::where('username',Session::get('adminSession'))->update(['password'=>$password]);
            return redirect('/admin/settings')->with('flash_message_success', 'Password updated successfully.');
        }else{
            return redirect('/admin/settings')->with('flash_message_error', 'Current Password entered is incorrect.');
        }

    }
}

理想情况下，它应该从中心开始，然后到达最右边的点，然后从最左边的点出来，并继续到达中心。

Answer 1

解决方案1：并不令人惊奇

根据您对“平滑”的定义（即向右走而向左走），您可以添加其他断点。只需确保正确设置百分比计时，以使其在到达右边缘之前和之后均以相同的速度行驶。

如果您使左右边缘之间的跳跃足够快，则它应该显示得很平滑。

body, html {
  overflow: hidden;
}

.trt-clouds-1 {
  width: 100vw;
  height: 200px;
  background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
  background-repeat: no-repeat;
  background-size: 10vw;
  animation: animatedBackground 4s linear infinite;
}

@keyframes animatedBackground {
  0% {
    background-position: 30vw 0;
  }
  63.6% {
    background-position: 100vw 0;
  }
  63.6000001% {
    background-position: -10vw 0;
  }
  100% {
    background-position: 30vw 0;
  }
}

<div class="trt-clouds-1"></div>

（动画的总行驶速度为110vw：向右移动70，向后移动40。为使其顺畅，动画花费了其中的7/11（63.6％）的速度，其余时间回来了，因此时间。）

解决方案2：非常优雅

第二种更优雅的选择是使用带有负起始值的animation-delay属性。（这并非从30vw开始，但是您明白了。）

html, body {
  overflow: hidden;
}

.trt-clouds-1 {
  width: 100vw;
  height: 200px;
  background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
  background-repeat: no-repeat;
  background-size: 10vw;
  animation: animatedBackground 4s linear infinite;
  animation-delay: -2s;
}

@keyframes animatedBackground {
  0% {
    background-position: -10vw 0;
  }
  100% {
    background-position: 100vw 0;
  }
}

<div class="trt-clouds-1"></div>

Answer 2

html, body {
  overflow: hidden;
}

.trt-clouds-1 {
  width: 100vw;
  height: 200px;
  background-position: 0 0; /* or you can add -10vw 0 for more flexible view on start of load*/
  background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
  background-repeat: no-repeat;
  background-size: 10vw;
  animation: animatedBackground 4s linear infinite;
  animation-delay: 0;
}

@keyframes animatedBackground {
  0% {
    background-position:-10vw 0;
  }
  100% {
    background-position: 100vw 0;
  }
}

<div class="trt-clouds-1"></div>

您唯一需要做的就是在CSS中添加背景位置

Answer 3

另一个技巧是依靠一定百分比并优化动画，如下所示。

.trt-clouds-1 {
  height: 200px;
  background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
  background-repeat: no-repeat;
  background-size: calc(200% + 10vw) 10vw;
  animation: animatedBackground 4s -2s linear infinite;
}

@keyframes animatedBackground {
  from {
    background-position:top right;
  }
}

<div class="trt-clouds-1"></div>

即使在非全宽div上也可以使用，因为我们不再依赖动画中的vw单元了：

.trt-clouds-1 {
  height: 200px;
  width:200px;
  border:1px solid;
  background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
  background-repeat: no-repeat;
  background-size: calc(200% + 50px) 50px;
  animation: animatedBackground 4s -2s linear infinite;
}

@keyframes animatedBackground {
  from {
    background-position:top right;
  }
}

<div class="trt-clouds-1"></div>

相关问题以获取有关计算的更多详细信息：Using percentage values with background-position on a linear gradient

您还可以考虑使用伪元素和翻译来提高性能：

.trt-clouds-1 {
  height: 200px;
  position:relative;
  overflow:hidden;
}
.trt-clouds-1:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:calc(200% + 10vw);
  height:10vw;
  background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position:center;
  animation: animatedBackground 4s -2s linear infinite;
}

@keyframes animatedBackground {
  from {
    transform:translate(-50%);
  }
}

<div class="trt-clouds-1"></div>

从中心开始的无限水平动画

3 个答案:

解决方案1：并不令人惊奇

解决方案2：非常优雅