文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >CSS动画在启动中蹒跚前行

问CSS动画在启动中蹒跚前行
EN

Stack Overflow用户
提问于 2017-10-03 22:35:56
回答 2查看 109关注 0票数 1

我想知道如何平滑我的动画当它第一次开始。目前，每个泡泡都会在过渡到流畅的动画之前蹒跚前行，但我不希望在创业时出现任何明显的变化。

我试过以下几种方法：

  • 向冒泡类添加一个转换属性
  • 更改动画计时功能以方便使用。
  • 将动画的持续时间更改为更长

所有这些都不起作用，我不知道如何达到这一效果。

​

代码语言：javascript
复制
$(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()

});
代码语言：javascript
复制
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);
  }
}
代码语言：javascript
复制
<!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>

​

jquery
css
animation
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-10-03 22:47:27

他们像这样向右移动，因为动画的开始立即将气泡告诉translateX(25%)。如果使用已应用的转换加载页面，它将按您的要求工作。请参阅下面的更新片段，其中只有一行额外的CSS。

​

代码语言：javascript
复制
$(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()

});
代码语言：javascript
复制
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);
  }
}
代码语言：javascript
复制
<!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>

​

票数 1
EN

Stack Overflow用户

发布于 2017-10-03 22:46:12

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

这导致了一个“平稳”的转变，但确实会导致泡沫一旦回到原来的位置就会短暂停止。您可能需要考虑在keyframe动画中添加额外的点，每个动画中都有自己独特的translateX偏移:)

​

代码语言：javascript
复制
$(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()

});
代码语言：javascript
复制
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);
  }
}
代码语言：javascript
复制
<!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>

​

希望这会有帮助！)

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/46554439

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档