CSS 연속 애니메이션

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

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

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

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

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

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

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

CSS 캐러셀 전환 애니메이션

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

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

CSS - 애니메이션 색상 변경 문제

이는 초기 색상 값입니다. 자세한 내용은 데모를 참조하십시오. 그런데 애니메이션 효과를 작성한 후 색상 값이 변경되는 이유는 무엇입니까?

世界只因有你 2017-06-28 09:27:36 0  1  1210

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

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

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

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

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

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

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

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

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

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

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

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

Javascript Html CSS를 로드할 때 숫자 카운터 애니메이션 프리로더 창

내 포트폴리오 웹사이트에 숫자 카운터 애니메이션을 만들고 싶습니다. 완전히 로드되면 프리로더에서 웹 사이트로 전환되는 이전 웹 사이트에 일부 jquery 코드가 있습니다. <script>$(window).on('load',()=>{$('#preloader').fadeOut(1800,function(){$(this).remove();});}); </script>숫자 카운터 애니메이션을 추가하고 측면 방향을 추가하는 방법

P粉523625080 2023-09-11 22:37:54 0  1  637

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

모바일의 버튼이 계속 초점을 맞추거나 활성 상태를 유지하여 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  510

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

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

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

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

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

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

스크롤 진행 애니메이션

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

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

Tailwind CSS의 React 서랍 구성요소의 애니메이션 닫기 문제를 해결하는 방법

내 React 프로젝트에서도 tailwindCSS를 사용하여 메뉴의 아이콘을 클릭하면 서랍이 열리는 기능을 구현했습니다. 문제는 내 구현에서 닫는 애니메이션이 손실된다는 것입니다(시작 애니메이션은 정상적으로 유지됩니다). 이 구성요소를 살펴보겠습니다. importReact,{useState}from'react';import{Link}from"react-router-dom";import{PlusCircleIcon}from&quot

P粉545682500 2023-08-13 10:44:01 0  1  567

javascript - jq의 단일 메소드 및 애니메이션 이벤트에 대한 질문

{코드...} 연속 애니메이션 이벤트를 작성하고 이벤트 리스너를 추가합니다. 이 애니메이션이 실행된 후 클래스를 추가하여 다음 애니메이션이 실행됩니다. 이제 문제는 애니메이션 실행이 완료된 후 첫 번째 플립 이벤트 리스너만 트리거되고 애니메이션 실행이 시작되면 후속 이벤트 리스너가 트리거된다는 것입니다.

某草草 2017-06-28 09:24:27 0  1  601

Vue.js에서 버튼을 클릭하면 애니메이션이 무작위로 생성됩니다.

세 개의 lottie 플레이어 json 애니메이션 파일이 있습니다. congratulations1.json, congratulations2.json 및 congratulations3.json 애니메이션은 다음과 같습니다. 축하합니다 1: <lottie-playerv-if="showPlayer1" class="justify-content-center" src=" ./../../

P粉722521204 2024-03-27 23:57:52 0  1  371

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

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

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