브라우저간에 애니메이션 타이밍 기능의 차이점이 있습니까? 난 그냥 선형 싶어요

Question

크롬, 파이어 폭스, 사파리, 오페라에서 앞뒤로 몇 가지 컬러 막대의 폭을 움직이게하면서 페이지에 맞게 전체 너비를 유지하면서 CSS 애니메이션을 설정하려고합니다. 나는 그것이 (폭이 대답하는 레이아웃에서 작동 할 수 있도록 무엇이든) 페이지의 가장자리에 튀어 나와 원하는대로 당신은 크롬에서 열 경우

내가 http://codepen.io/marblegravy/pen/rxhym

에서 데모를 설정, 정확히 작동 .

그러나 Firefox, Safari 및 Opera에서는의 선형 선언이 효과가 나타나지 않으며 모든 것이 앞뒤로 조정됩니다.

저는 Codepen에서 바로 가기 코드를 사용하기 위해 Prefix-free을 사용하고 있습니다. 그러나 문제가있는 곳이라고 생각하지 않습니다.

아이디어가 있으십니까?

Answer 1

CSS 트릭/해킹의 폭을 애니메이션으로 만듭니다. CSS는 여러 브라우저에서 다르게 해석되므로 다른 결과가 나옵니다. 또한 이것은 모든 브라우저가 자신의 방식으로 해석 할 트릭입니다.

simular setup 물마루 jQuery Ui를 만들 수 있습니다. 예를 들어 animate는 또한 요소, 색상 등의 크기를 조절할 수 있습니다. 제 의견으로는 CSS 트릭을 사용하면 더 좋고 견고한 대안이 될 수 있습니다.

자세한 내용은 CSS의 애니메이션 초안 아직 .. 나는 그것이 JS와 함께 할 수 그리고 그것은 확실히 더 강력한 방법을 알고 http://jqueryui.com/docs/animate