CSS 연속 애니메이션

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

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

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  545

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

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

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

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

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

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

반응형 모달 슬라이딩 애니메이션

반응 및 CSS에 모달을 구현했으며 현재 열 때 모달이 아래쪽에서 위로 미끄러지는 슬라이드 업 애니메이션을 구현했지만 닫으면 아래로 내려가고 싶습니다. 스와이프, 어떻게 해야 할지 모르겠습니다. 아래로 스와이프 애니메이션을 정확하게 생성하려면 누구든지 도와줄 수 있나요? 코드=>import"./styles.css";importreact,{useState}from"react";exportdefault

P粉514458863 2023-08-30 22:49:29 0  1  551

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

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

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

스크롤 진행 애니메이션

스크롤 진행에 애니메이션을 적용하는 방법을 알아야 합니다. 이는 일반적인 스크롤 진행이 아니라 뭔가 다릅니다. 웹사이트 링크와 제가 찾고 있는 애니메이션이 포함된 특정 부분의 스크린샷을 제공하겠습니다. https://todoist.com/웹사이트 링크입니다. 웹사이트 홈페이지의 특정 섹션에 대한 스크린샷을 첨부했습니다. 페이지를 스크롤하면 섹션 내에서 스크롤이 발생하고 섹션 자체도 스크롤됩니다. 해당 스크롤 섹션이 완료되면 정상적으로 계속 스크롤하십시오. 스크롤 진행률 표시줄에 대한 많은 튜토리얼을 볼 수 있지만 이 특정 스타일의 ...

P粉821808309 2024-03-29 19:36:49 0  1  394

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

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

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

svg 애니메이션과 css3 애니메이션의 장단점은 무엇입니까?

RT, 어떤 상황에서 어떤 솔루션에 적합한 전환 애니메이션 효과가 있나요?

曾经蜡笔没有小新 2017-05-16 13:21:17 0  1  630

CSS 캐러셀 전환 애니메이션

그림과 같이 JS로 작성된 애니메이션에 과도한 효과를 설정하면 이런 상황이 발생하게 됩니다. JS에서는 이러한 상황을 어떻게 바꿀 수 있을까요? {암호...}

習慣沉默 2017-06-12 09:33:00 0  1  867

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

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

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

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

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

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

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

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

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

모바일의 버튼이 계속 초점을 맞추거나 활성 상태를 유지하여 CSS 애니메이션에 문제를 일으킴

버튼을 클릭할 때마다 애니메이션을 구현하려고 하는데 데스크톱에서는 잘 작동하지만 모바일에서는 동일한 효과를 얻을 수 없습니다. 먼저 버튼을 클릭한 다음 다른 곳을 클릭하여 CSS의 초점을 맞춘 다음 버튼을 다시 클릭하여 애니메이션 효과를 얻어야 합니다. 아래는 코드 조각입니다. .btn_container{color:#35f8ff;position:relative;display:inline-block;text-align:center;margin:2.5remauto

P粉043295337 2023-08-28 15:14:37 0  1  503

왼쪽에서 오른쪽으로 더 가까워지고 멀어지는 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  545

클래스 제거 시 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  506

CSS를 사용하여 그라데이션 애니메이션을 만드는 방법

여러 색상이 포함된 그라디언트를 부드럽게 이동하고 싶은데 애니메이션이 매끄럽지 않은 것이 문제입니다. 매 단계마다 위치가 변경됩니다. <스타일>.animated{폭:300px;높이:300px;border:1pxsolidblack;animation:gra5sinfinite;animation-direction:reverse;-webkit-animation:gra5sinfinite;-web

P粉909476457 2023-09-18 09:47:10 0  2  741

CSS 애니메이션은 사라지지 않습니다.

마우스를 올리면 배경 이미지가 페이드 인 및 페이드 아웃되는 간단한 애니메이션 문제를 해결하려고 합니다. 키프레임을 정의했는데도 웹 브라우저에 정의되지 않은 것으로 표시됩니다. .elementor-section.elementor-element.core-range>.elementor-container:hover.product-image::before{animation:coreRangeBackground0.3sease-in -아웃0.

P粉352408038 2023-08-18 16:45:01 0  1  555

javascript - 두 개의 스와이퍼가 중첩되어 있습니다. 외부 스와이퍼 애니메이션이 초기화되면 애니메이션 요소가 숨겨지고 표시되지 않습니다.

초기 상태: 두 번째 페이지로 슬라이드한 후 뒤로 슬라이드하면 애니메이션 요소가 나타나고 JS 코드가 정상적으로 재생됩니다.

我想大声告诉你 2017-05-19 10:32:28 0  1  752

javascript - 시간에 따라 구성요소를 회전(애니메이션)하게 만드는 방법은 무엇입니까?

애니메이션처럼 화면에서 구성요소를 회전시키는 방법이 있나요? Autodesk Forge WeChat 토론 그룹 – pochao 질문하기

phpcn_u1582 2017-05-19 10:09:55 0  1  567