>

애니메이션이 처음 시작될 때 매끄럽게하는 방법을 알고 싶습니다. 현재 각 애니메이션이 부드러운 애니메이션으로 전환되기 전에 숨어 있지만 시작시 눈에 띄게 숨기고 싶지 않습니다.

다음을 시도했습니다 :

  • 버블 클래스에 전환 속성 추가
  • 애니메이션 타이밍 기능을 쉽게 변경하기
  • 애니메이션의 지속 시간을 길게 변경

이 중 어느 것도 효과가 없으며이 효과를 얻는 방법을 잘 모르겠습니다.

$(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 {
  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>

  • 답변 # 1

    애니메이션의 시작이 거품을 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>
    
    

  • 답변 # 2

    해야 할 일은 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>

  • 이전 web - laravel 55에서 편집하려는 정보로 양식을 작성하려면 어떻게해야합니까?
  • 다음 sonarqube5.1 - sonarqube 65 - sql server 데이터베이스를 구성 할 수 없습니다