홈>
애니메이션이 처음 시작될 때 매끄럽게하는 방법을 알고 싶습니다. 현재 각 애니메이션이 부드러운 애니메이션으로 전환되기 전에 숨어 있지만 시작시 눈에 띄게 숨기고 싶지 않습니다.
다음을 시도했습니다 :
- 버블 클래스에 전환 속성 추가
- 애니메이션 타이밍 기능을 쉽게 변경하기
- 애니메이션의 지속 시간을 길게 변경
이 중 어느 것도 효과가 없으며이 효과를 얻는 방법을 잘 모르겠습니다.
$(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
- 답변 # 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>
관련 질문
- javascript : iframe 내부의 하드코딩된 요소 스타일 재정의
- javascript : Safari jquery 선택 옵션 .hide() 대안
- html : ULTRA 단순 JQuery가 작동하지 않음 -단일 클래스 추가
- html : CSS 키프레임 애니메이션 루프 '무한', 클릭 시 현재 반복 완료 후 일시 중지
- javascript : div의 맨 아래에 가까워지면 JS 값을 점진적으로 감소
- javascript : jQuery mouseenter 및 mouseleave: 자식 차단 및 이미지 확대
- JQuery 모달은 IE6의 목록 상자 맨 위에 표시되지 않습니다.
- javascript : PHP json_encode 대신 서버에서 데이터를 다시 보내는 또 다른 방법
- html : 갤러리 필터 플러그인 'Filterizr' -믹스 필터 모드
- javascript : 자바 스크립트로 단락 텍스트 클릭시 이미지를 변경하는 방법
애니메이션의 시작이 거품을
translateX(25%)
에게 즉시 알려주기 때문에 오른쪽으로 움직입니다. . 변형이 이미 적용된 페이지를로드하면 원하는대로 작동합니다. CSS 한 줄만 추가하면 아래의 업데이트 된 스 니펫을 볼 수 있습니다.