CSS 애니메이션이 예상대로 작동하지 않습니다.
스트라 잔
문제
간단한 CSS 애니메이션을 만들었지 만 예상대로 작동하지 않습니다. 아이디어는 애니메이션이 직선 (위에서 아래로)을 그리고 사라지는 것 (위에서 아래로)입니다.
선의 시작은 애니메이션이 시작될 때 약간 아래로 이동 한 다음 다시 위로 올라가 설정 위치를 유지합니다 (애니메이션이 끝날 때 하단에도 동일 함).
질문
줄의 시작 부분을 아래로 '바운스'하는 대신 한 위치에 유지하려면 어떻게해야합니까?
예상되는 행동
실제 행동
암호
.lineWrapper {
width: 1px;
height: 300px;
margin: auto;
position: relative;
}
.lineWrapper .line {
width: 100%;
height: 100%;
background: #000;
animation: scrollLine 5s linear infinite;
}
@keyframes scrollLine {
0% {
transform: scaleY(0);
}
10% {
transform: scaleY(0);
transform-origin: top;
}
30% {
transform: scaleY(1);
}
70% {
transform: scaleY(1);
}
90% {
transform: scaleY(0);
transform-origin: bottom;
}
100% {
transform: scaleY(0);
}
}<div class="lineWrapper">
<div class="line"></div>
</div>Codepen
Afif 동반
기본값 transform-origin은 중앙이므로 초기 및 마지막 상태에서 생략하면 중앙으로 설정됩니다. transform-origin중간에 즉시 변경해야합니다 .
.lineWrapper {
width: 1px;
height: 300px;
margin: auto;
position: relative;
}
.line {
height: 100%;
background: #000;
animation: scrollLine 5s infinite;
}
@keyframes scrollLine {
0%,10% {
transform: scaleY(0);
transform-origin: top;
}
49.9% {
transform: scaleY(1);
transform-origin: top;
}
50% {
transform: scaleY(1);
transform-origin: bottom;
}
90%,100% {
transform: scaleY(0);
transform-origin: bottom;
}
}<div class="lineWrapper">
<div class="line"></div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
CSS 애니메이션이 예상대로 작동하지 않습니다.
- 2
CSS 애니메이션이 예상대로 작동하지 않습니다.
- 3
CSS 만로드하는 애니메이션이 예상대로 작동하지 않습니다.
- 4
CSS not ()이 예상대로 작동하지 않습니다.
- 5
jquery 애니메이션이 예상대로 작동하지 않습니다.
- 6
CSS3 애니메이션 이미지가 예상대로 응답하지 않습니다.
- 7
CSS 슬라이드 메뉴가 예상대로 작동하지 않습니다.
- 8
css @media가 예상대로 작동하지 않습니다.
- 9
CSS 애니메이션에서 SVG 클리핑 마스크가 예상대로 작동하지 않음
- 10
CSS 전환-시작시 애니메이션이 제대로 작동하지 않습니다.
- 11
Codepen CSS 애니메이션 예제가 로컬에서 작동하지 않습니다.
- 12
CSS 드롭 다운 메뉴가 예상대로 작동하지 않습니다.
- 13
애니메이션 CSS가 작동하지 않습니다.
- 14
CSS Z- 색인이 예상대로 작동하지 않습니다.
- 15
UIView 크기를 조정하는 동안 애니메이션이 예상대로 작동하지 않습니다.
- 16
Opacity에 대한 TextBlock 애니메이션이 예상대로 작동하지 않습니다.
- 17
Firefox에서 CSS 애니메이션이 제대로 작동하지 않음
- 18
onMouseMove 중 배경 슬라이드 애니메이션이 예상대로 작동하지 않습니다.
- 19
Android 조각 애니메이션이 예상대로 작동하지 않습니다.
- 20
순차적 번역 애니메이션이 예상대로 작동하지 않습니다.
- 21
CSS 애니메이션 및 -moz-는 절대 블록에서 작동하지 않습니다.
- 22
사이트의 CSS 하위 메뉴가 예상대로 작동하지 않습니다.
- 23
CSS 육각 테두리가 예상대로 작동하지 않습니다.
- 24
CSS 육각 테두리가 예상대로 작동하지 않습니다.
- 25
CSS3 흐림 효과가 예상대로 작동하지 않습니다.
- 26
CSS 스타일 텍스트가 예상대로 작동하지 않습니다.
- 27
태그에 대해 CSS 애니메이션이 작동하지 않음
- 28
iOS 애니메이션 presentationLayer hitTest가 예상대로 작동하지 않는 것 같습니다.
- 29
CSS 애니메이션 : 전환이 역방향으로 작동하지 않음
몇 마디 만하겠습니다