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 - 애니메이션 색상 변경 문제

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

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

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

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

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

CSS 연속 애니메이션

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

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

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

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

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

javascript - 지연을 위해 animation-defer 또는 settimeout을 사용하면 애니메이션이 멈추는 반면 지연을 사용하지 않으면 매우 원활한 이유는 무엇입니까?

1. animation-defer 또는 settimeout을 사용하면 지연이 발생하는 이유는 무엇입니까? 지연을 사용하지 않고도 매우 원활하게 작동합니다. 예를 들어 아래와 같이 지연이 항상 발생한다는 의미는 아닙니다. 애니메이션: Moveup 0.9초 Ease-in-out 앞으로;...

PHP中文网 2017-05-24 11:37:02 0  1  813

CSS 캐러셀 전환 애니메이션

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

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

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

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

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

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

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

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

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

스크롤 진행 애니메이션

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

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

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

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

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

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

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