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

Jquery를 사용하여 애니메이션 애니메이션을 중지하는 방법

상자가 오른쪽으로 이동하도록 제어하려면 TurnRight 메서드를 실행하고, 상자가 왼쪽으로 이동하도록 제어하려면 TurnLeft 메서드를 실행합니다. {Code...} TurnRight 메서드와 animate animation 메서드에 console.log("end")를 실행하는 콜백 함수를 추가했습니다. 이제 질문이 있습니다.

某草草 2017-05-16 13:43:21 0  3  582

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

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

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

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

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

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

CSS 연속 애니메이션

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

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

javascript - 페이지 로딩 애니메이션 효과가 표시되지 않나요?

1. 현재 작업 중인 프로젝트는 데이터 테이블 페이지입니다. 백그라운드 쿼리가 오래 걸리기 때문에 사용자 경험을 향상시키기 위해 로드 애니메이션을 추가합니다. 애니메이션 로딩을 위한 플러그인에는 문제가 없지만 메소드 실행 중에 애니메이션 효과가 없는 것으로 확인되었습니다. 2. 코드를 직접 붙여넣으세요. JS 시작하기...

迷茫 2017-05-19 10:18:28 0  4  715

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

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

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

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

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

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

스크롤 진행 애니메이션

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

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

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

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

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

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

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

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

javascript - 전환 높이 자동 전환 애니메이션

1. 축소 시 애니메이션 효과가 없는 이유는 무엇입니까? 2. 코드 {code...} 3. 온라인 데모(해결됨)

大家讲道理 2017-05-16 13:21:31 0  3  826

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

투명성과 애니메이션을 유지하면서 Next.js 13에서 애니메이션 SVG 파일을 가져오는 방법은 무엇입니까?

Next.js13에서 애니메이션 SVG 파일 가져오기 importImagefrom"next/image";exportdefaultfunctionHome(){return(<mainclassName="flexh-screenflex-colitems-center"><divclassName="containermt-12flex

P粉322106755 2024-03-27 13:38:40 0  1  497

Lesson 1의 애니메이션을 페이지 중앙으로 이동하는 방법

Lesson 1의 애니메이션을 페이지 중앙으로 이동하는 방법

闻人羽 2018-01-26 18:29:21 0  1  1405

버튼을 클릭할 때 이 애니메이션 클래스를 모달에 어떻게 추가할 수 있나요?

모달에서 "x" 버튼을 클릭하면 애니메이션이 발생하기를 원하지만 현재는 애니메이션이 없이 모달이 닫히고 모달을 다시 열면 아무 것도 클릭하지 않고 애니메이션이 발생하는 상황이 발생합니다. 이것은 현재 애니메이션 클래스 코드입니다. .scale-out-center{-webkit-animation:scale-out-center0.3scubic-bezier(0.550,0.085,0.680,0.530)both;animation:scale-ou

P粉064448449 2024-03-30 22:05:19 0  1  481

javascript - jQuery의 애니메이션 기능이 비동기 실행으로 간주됩니까?

{코드...} 위의 코드가 move(1); mark2=false;라는 두 문장을 실행하면 이동 함수에 애니메이션 함수가 사용됩니다. 이는 실행을 위해 작업 대기열에 넣는 것을 의미하므로 mark2=false가 먼저 실행됩니다. 이것이 맞습니까?

怪我咯 2017-06-26 10:51:31 0  2  908

CSS 캐러셀 전환 애니메이션

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

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

내 Lottie 애니메이션이 로컬 호스트 서버에서는 올바르게 로드되지만 배포 서버에서는 로드되지 않는 이유는 무엇입니까?

따라서 문제는 모든 Lottie 애니메이션이 내 로컬 호스트 서버에 로드되지만 일단 웹 앱이 배포되면 애니메이션이 로드되지 않고 콘솔에 일부 오류가 발생한다는 것입니다. 애니메이션 파일은 .json 파일입니다. 내 프로젝트는 다음 jsReact 프로젝트입니다. lottie 링크: https://lottiefiles.com/ 하지만 배포 서버(vercel)를 열면 애니메이션이 로드되지 않고 콘솔에 일부 오류가 발생합니다. 이 문제를 어떻게 해결할 수 있나요?

P粉662614213 2024-03-29 12:05:35 0  2  486

javascript - jQuery의 각 함수 순회를 animate 함수와 함께 사용할 때 실행 프로세스는 무엇입니까?

{코드...} 이해가 안 되는 점은 각 루프가 수행될 때 애니메이션 실행에 500ms가 걸린다는 것입니다. 그러면 애니메이션 실행이 끝난 후 다음 루프가 시작된다는 의미입니까, 즉 500밀리초입니까? 아니면 다음 주기를 실행하기 전에 애니메이션 실행이 끝날 때까지 기다리십니까?

三叔 2017-06-30 10:00:02 0  2  956