Question

我想知道如何在首次启动时平滑动画。目前，每个泡泡在转变为平滑动画之前都会向前倾斜，但我不希望在启动时出现明显的晃动。

我尝试过以下方法：

将过渡属性添加到冒泡级
将animation-timing-function更改为ease-in
将动画的持续时间更改为

这些都不起作用，我不确定如何达到这个效果。

＆＃13;

$(document).ready(function() {
  var bubbles = $('.bubble')

  function animate_bubbles() {
    bubbles.each(function(index) {
      $(this).css( 'animation-delay', `${index * 0.3}s` )
      $(this).addClass('bubble-active')
    })
  }

  animate_bubbles()

});

＆＃13;

html, body {
  height: 100%;
}

#page-wrapper {
  box-sizing: border-box;
  padding: 10%;
  background: black;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}


.bubble {
  background: skyblue;
  border-radius: 50%;
  width: 5%;
  margin-right: 5%;
}

.bubble:before {
  content: '';
  display: block;
  padding-top: 100%;
}


.bubble-active {
  animation: bubble-animation 3s infinite linear;
}

@keyframes bubble-animation {
  from { 
    transform: rotate(0deg) translateX(25%) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(25%) rotate(-360deg);
  }
}

＆＃13;

<!doctype html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
    <link rel='stylesheet' href='test.css'>
  </head>
  <body>
    <div id='page-wrapper'>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
    </div>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script src='test.js'></script>
  </body>
</html>

＆＃13;

Answer 1

您需要做的是在translateX 0%处开始和结束关键帧，添加额外的关键帧来处理实际的动画。在以下示例中，我在50%添加了一个额外的关键帧点，其translateX偏移量为25%。

这会导致“平滑”过渡，但是一旦返回原始位置，确实会导致气泡短暂停止。您可能需要考虑在关键帧动画中添加额外的点，每个点都有自己唯一的translateX偏移量：）

$(document).ready(function() {
  var bubbles = $('.bubble')

  function animate_bubbles() {
    bubbles.each(function(index) {
      $(this).css('animation-delay', `${index * 0.3}s`)
      $(this).addClass('bubble-active')
    })
  }

  animate_bubbles()

});

html,
body {
  height: 100%;
}

#page-wrapper {
  box-sizing: border-box;
  padding: 10%;
  background: black;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.bubble {
  background: skyblue;
  border-radius: 50%;
  width: 5%;
  margin-right: 5%;
}

.bubble:before {
  content: '';
  display: block;
  padding-top: 100%;
}

.bubble-active {
  animation: bubble-animation 3s infinite linear;
}

@keyframes bubble-animation {
  0% {
    transform: rotate(0deg) translateX(0%) rotate(0deg);
  }
  50% {
    transform: rotate(360deg) translateX(25%) rotate(-360deg);
  }
  100% {
    transform: rotate(360deg) translateX(0%) rotate(-360deg);
  }
}

<!doctype html>
<html lang='en'>

<head>
  <meta charset='utf-8' />
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet" />
  <link rel='stylesheet' href='test.css'>
</head>

<body>
  <div id='page-wrapper'>
    <div class='bubble'></div>
    <div class='bubble'></div>
    <div class='bubble'></div>
    <div class='bubble'></div>
    <div class='bubble'></div>
    <div class='bubble'></div>
    <div class='bubble'></div>
    <div class='bubble'></div>
    <div class='bubble'></div>
    <div class='bubble'></div>
    <div class='bubble'></div>
    <div class='bubble'></div>
    <div class='bubble'></div>
    <div class='bubble'></div>
    <div class='bubble'></div>
    <div class='bubble'></div>
    <div class='bubble'></div>
    <div class='bubble'></div>
  </div>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
  <script src='test.js'></script>
</body>

</html>

希望这有帮助！：）

Answer 2

他们正在向右移动，因为动画的开始会立即将气泡告诉translateX(25%)。如果您加载已应用转换的页面，它就会像您想要的那样工作。只需一行额外的CSS即可查看下面的更新代码段。

$(document).ready(function() {
  var bubbles = $('.bubble')

  function animate_bubbles() {
    bubbles.each(function(index) {
      $(this).css( 'animation-delay', `${index * 0.3}s` )
      $(this).addClass('bubble-active')
    })
  }

  animate_bubbles()

});

html, body {
  height: 100%;
}

#page-wrapper {
  box-sizing: border-box;
  padding: 10%;
  background: black;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}


.bubble {
  background: skyblue;
  border-radius: 50%;
  width: 5%;
  margin-right: 5%;
  transform: rotate(0deg) translateX(25%) rotate(0deg);
}

.bubble:before {
  content: '';
  display: block;
  padding-top: 100%;
}


.bubble-active {
  animation: bubble-animation 3s infinite linear;
}

@keyframes bubble-animation {
  from { 
    transform: rotate(0deg) translateX(25%) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(25%) rotate(-360deg);
  }
}

<!doctype html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
    <link rel='stylesheet' href='test.css'>
  </head>
  <body>
    <div id='page-wrapper'>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
      <div class='bubble'></div>
    </div>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script src='test.js'></script>
  </body>
</html>

CSS动画在启动时徘徊

2 个答案: