CSS 애니메이션을 사용하여 애니메이션 지연 및 깜박임

대화 형 웹 UI에서 작업 중이며 깜박임 및 지연 애니메이션이 실행 중입니다.CSS 애니메이션을 사용하여 애니메이션 지연 및 깜박임

저는 거의 모든 CSS 전환을 사용하여 jQuery로 클래스를 추가 및 제거하여 특정 애니메이션을 시작/중지합니다. jQuery 애니메이션을 사용하는 것보다 성능이 더 좋다고 들었지만 Chrome (응용 프로그램의 의도 된 브라우저)을 사용할 때 깜박임과 지연 애니메이션이 실행되고 있습니다.

여기를 체크 아웃 :

lib.ncsu.edu/hunt_touchscreens/demo 여기에 내가 뭐하는 거지 전이 중 하나의 예입니다. 그것은 매우 간단하고 어떤 웹킷, O 등의 접두어도 사용하지 않습니다.

#x { 
    opacity: 0; 
    transition: opacity .5s; 
}

나는이 질문이 너무 개방형하지 희망, 그러나 나는 호기심이 다른 동시 전환을 많이 갖는 브라우저의 단지 제한 사항입니다 오전, 또는 이러한 성능 문제를 방지하기위한 효과적인 전략이있다.

어떤 조언을 해주셔서 감사합니다.

출처

2017-01-23 Matthew O' Connell

나는 우리가 조금 더 나아가는 것을 허용한다면 이것이 너무 개방적이라고 생각하지 않는다. 당신은 또한 당신의 HTML과 js를 올리거나 사람들이 당신이보고있는 것을 시도하고 볼 수 있도록 jsfiddle을 제공 할 수 있습니까? – akousmata

불행히도 애플리케이션 전체가로드 될 때만 문제가 표시되고 간결한 jsfiddle의 특정 문제를 해결하는 데 어려움을 겪고 있기 때문에 어려운 일입니다. Pyloid는 아래에 좋은 대답을했습니다. 나는 너무 많은 브라우저에 과도기 전환을 사용하고 있다고 생각한다. 읽어 주셔서 감사합니다! –

많은 작업이 필요할 수 있지만 왼쪽/오른쪽에서 transition의 사이트가 있습니다. 레이아웃을 다시 실행해야하기 때문에 브라우저에 세금이 부과됩니다. 단 하나의 요소 만 이동하는 것이 아니라 계산해야하기 때문입니다. 주위의 다른 요소.

성능이 좋은 CSS 애니메이션을 사용하는 데있어서 트릭은 브라우저가 매우 빠르다는 몇 가지 속성 만 고집합니다. 특히 많은 요소가 잠재적으로 한꺼번에 이동할 수있는 전환 여백 페이지가있는 경우 특히 그렇습니다.

위치 그것을 here 대해 자세히 있지만의 요지를 변경하는 엘리먼트의 다음 속성을 사용 - 변환 : translateX (N) translate Y를 (N) translateZ을 (N);
스케일 변환 : 스케일 (n);
회전 - 변환 : 회전 (ndeg);
불투명도 - 불투명도 : n;

따라서 "왼쪽"위치 변경 사항을 transform: translateX();의 일부 양식으로 다시 작성하고 최적 성능을 원할 경우 페이지 내의 다른 요소에 미치는 영향을 고려해야합니다.

출처

2017-01-23 20:32:05 joeyfb

굉장합니다. 의견을 보내 주셔서 감사합니다. 내 주요 장점은 여기에 응용 프로그램이 고정 된 화면 크기를 가지기 때문에, 변형을 사용하는 것이 보통의 반응 형 사이트보다 어렵지 않을 것이라고 생각합니다. –

CSS 애니메이션을 사용하여 애니메이션 지연 및 깜박임

답변

관련 문제