홈>2020-02-01 01:31

jquery - 시작시 숨어있는 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%;
}
.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>

jquerycsscss3animation

답변 # 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 데이터베이스를 구성 할 수 없습니다

Python2.net

jquery - 시작시 숨어있는 CSS 애니메이션