CSS 연속 애니메이션

다음 CSS 코드가 있습니다. 문제는 애니메이션이 원하는 방식으로 작동하지만 10초가 지나면 재설정되어 보기 흉하다는 것입니다. 이상적으로는 다시 시작하는 대신 이미지를 감싸고 이미지의 왼쪽이 캔버스 밖으로 나갈 때 오른쪽에서 다시 나타나는 무한 애니메이션을 갖고 싶습니다. @keyframesscrollRight{0%{배경-위치-x:30%;}100%{배경-위치-x:130%;}}.onrir{backgroun

P粉928591383 2024-03-20 12:30:42 0  1  495

CSS 애니메이션 이름의 구체적인 의미는 애니메이션의 채우기 모드를 나타냅니다.

최근에 CSS를 사용하여 특정 클래스의 불투명도가 0%에서 100%로 바뀌는 애니메이션을 만들려고 했습니다. 하지만 class="bar" 애니메이션에서 몇 가지 문제가 발생했습니다. animation-fill-mode는 타이틀 애니메이션(불투명도 변경)뿐만 아니라 바 애니메이션에도 적용된다는 것을 알 수 있습니다. animation-fill-mode의 애니메이션 이름을 지정하는 방법이 있나요? 제가 만드는 데 사용한 코드는 다음과 같습니다. @keyframestitle{from{-we

P粉441076405 2023-09-13 10:16:28 0  1  561

클래스 제거 시 CSS 애니메이션이 중지되는 것을 방지하는 방법

그리드가 있습니다. 백엔드로부터 업데이트 메시지를 받으면 3초 이내에 행을 주황색으로 강조 표시해야 합니다. 업데이트를 받으면 CSS 클래스 '강조 표시'를 내 행에 추가하고 애니메이션을 재생합니다. .highlight{animation-name:highlight;animation-duration:3s;}@keyframeshighlight{0%{Background-color:orange;}99.99%{배경

P粉412533525 2023-08-29 16:15:06 0  1  525

javascript - 모바일 CSS 애니메이션 재생 상태 일시정지가 iOS에서 작동하지 않습니다.

모바일 CSS 애니메이션 재생 상태 일시 중지가 ios animation-play-state에서 작동하지 않습니다. 그림을 클릭하여 중지한 다음 그림을 클릭하여 계속 회전하고 싶습니다. 이는 Android 휴대폰에서는 가능하지만 iOS에서는 사진을 첫 번째 클릭하면 정적 움직임 없이 계속 회전합니다. 대신 두 번째 클릭에서는...

给我你的怀抱 2017-06-26 10:53:05 0  1  1251

javascript - CSS 애니메이션에 어떤 문제가 있나요?

리플로우와 리페인트에 관한 http://blog.csdn.net/ClaireKe... 기사를 읽었습니다. 몇 가지 의문점이 있습니다. 1. 브라우저 메커니즘에서 새로 고침 작업에는 리플로우와 다시 그리기가 포함되어야 합니까? 2. 페이지에 `div { {code...

为情所困 2017-05-18 10:49:05 0  1  681

html5 - CSS 애니메이션을 사용한 설명: 공이 위아래로 튀었습니다(지속 시간 2초, 한 번 실행).

CSS 애니메이션을 사용하여 설명: 공이 위아래로 튕겨 나옵니다(지속 시간 2초, 한 번 실행).

巴扎黑 2017-05-16 13:44:36 0  2  722

마지막에 CSS 애니메이션을 최종 상태로 유지

CSS에서 opacity:0으로 설정된 일부 요소에 대해 애니메이션을 실행하고 있습니다. 불투명도를 0에서 1로 변경하는 키프레임을 사용하여 onClick 이벤트에 애니메이션 클래스가 적용됩니다(및 기타 몇 가지 변경 사항). 불행하게도 애니메이션이 끝나면 요소는 불투명도:0(Firefox와 Chrome 모두에서) 상태로 돌아갑니다. 내 본능은 애니메이션 요소가 원래 속성을 무시하고 최종 상태로 유지된다는 것입니다. 이것이 사실이 아닌가? 그렇지 않다면 어떻게 요소를 최종 상태로 유지할 수 있습니까? 코드(접두사 버전 제외): @k...

P粉950128819 2023-08-20 18:36:55 0  2  670

React 및 인라인 CSS를 사용하는 Apple 애니메이션 문제

저는 인라인 스타일과 TypeScript를 사용하여 HTML과 CSS를 사용하여 React에서 이 애니메이션을 다시 만들려고 합니다. 스타일 정보가 포함된 개체를 만들고 이를 스타일 속성에서 참조합니다. 아래는 코드입니다. 작동하지 않습니다. 제가 뭘 잘못하고 있는지 잘 모르겠습니다. 스타일이 올바르게 정의 및 참조되지 않은 것 같습니다. 이것은 제가 다시 작성하려고 하는 원본 Codepen 예제입니다. Apple Animations 이것은 내 코드입니다 importReactfrom'react';conststyles={'@keyfr...

P粉729436537 2024-01-10 17:08:30 0  1  351

javascript - 이상한 문제를 발견했습니다. 탭을 닫으면 제가 작성한 CSS 애니메이션이 자동으로 일시중지됩니다.

이상한 문제를 발견했습니다. 제가 작성한 CSS 애니메이션이 탭을 닫으면 자동으로 일시정지되고, 탭을 펼치면 계속 재생됩니다. 움직이는 효과를 얻기 위해 배경 이미지를 사용하는 것도 이와 관련이 있나요?

给我你的怀抱 2017-06-30 09:52:30 0  1  860

후속 클래스가 요소에 추가될 때마다 CSS 애니메이션을 실행하는 방법

요소에 애니메이션을 적용할 수 있도록 CSS 애니메이션 클래스를 설정했습니다. 입력 버튼을 클릭하면 이 클래스가 추가되고 예제의 입력 버튼을 클릭할 때마다 화면으로 날아가도록 하고 싶습니다. 그러나 처음에만 작동하며 후속 입력 클릭에서는 요소에 애니메이션이 적용되지 않습니다. 내가 여기서 무엇을 놓치고 있는 걸까요? $(document).ready(function(){jQuery('#cloc').click(function(){jQuery('p').removeClass('anim

P粉714780768 2023-09-09 22:36:42 0  1  560

왼쪽에서 오른쪽으로 더 가까워지고 멀어지는 CSS 애니메이션으로 턴테이블의 유리 외관의 움직임을 시뮬레이션합니다.

정면에서 볼 때 턴테이블 판 위의 유리의 움직임을 시뮬레이션하면서 더 가까워지고 멀어지면서 왼쪽에서 오른쪽으로 수평으로 이동하는 CSS 애니메이션을 만들려고 합니다. 가까이 다가가는데 여전히 잘 보이지 않고, 현재는 원이 아닌 다이아몬드 모양을 따라 움직이는 것처럼 보입니다. 제가 시도한 것은 다음과 같습니다... Roll{display:block;width:100px;height:100px;Background:red;margin:10pxauto10pxauto;animation:ro

P粉208469050 2023-09-04 21:59:55 0  1  569