1. 홈
  2. 질의 응답
  3. CSS 필터의 애니메이션 가능한 전환 속성이 ​​있습니까?

CSS 필터의 애니메이션 가능한 전환 속성이 ​​있습니까?

2012-08-30 4 views

답변

46 
-webkit-transition : -webkit-filter 500ms linear

작품 :

다음은 예입니다. 나는 FF 나 Opera에서 필터 지원에 관해 모른다.

전적으로 귀하의 질문을 이해할 수 있을지 확신하지 못합니다.

출처

2012-08-30 09:52:17 mddw

+1

정확하게 이해했습니다. 외관상으로 전환 속성은이 글을 쓰는 동안 접두어로만 작동합니다. 감사합니다. – donleche

+0

-webkit-filter를 전환하면 애니메이션이 잘되지만 애니메이션 후에는 DIV가 비어있는 것으로 보입니다. div에 5px의 흐리게 적용하고 있습니다. –

+0

분명히 흐림 div를 포함하는 div가 전환 된 왼쪽 위치 집합을 가질 때만 중단되기 때문에 렌더링 글리치가 발생합니다. 그러나 왼쪽이 0px이면 흐림 div가 더 이상 사라지지 않습니다 (또는 흐리게 처리하면 변경됩니다. 컨테이너의 왼쪽 위치). 그들이 이러한 꼬임을 해결할 수 있기를 바랍니다! –

15

그게 내가 사용하는거야. 모질라의 경우 제 2가 나를 위해 일하고 있습니다. 그러나 제 출처에서 -moz- 접두어로 찾았습니다. 그래서 두 가지를 모두 지키지 않아도됩니다.

-webkit-transition: 1s -webkit-filter linear; 
-moz-transition: 1s -moz-filter linear; 
-moz-transition: 1s filter linear; 
-ms-transition: 1s -ms-filter linear; 
-o-transition: 1s -o-filter linear; 
transition: 1s filter linear, 1s -webkit-filter linear;

출처

2015-03-09 21:36:15 abimelex

+1

@AxeEffect가 그의 코멘트에서 언급했듯이 최신 Chrome 지원을 위해 'transition : 1s filter linear, 1s -webkit-filter linear'와 같이 '-webkit-filter' 속성을 접두사가없는'transition'에 추가해야합니다. –

3
마지막으로 당신이 transition-property (더 속기 transition)를 사용하지 않으면, -webkit- 접두사없이 transition을 지원하는 크롬의 버전과 여전히 접두어가 혼합 할 필요가 -webkit- 접두사를 필요로 filter 등의 특성에

및 접두사 코드 :

transition-property: width, left, transform, box-shadow, filter, -webkit-filter;

으로 filter 속성이 반복됩니다. 이는 Firefox와 같이 접두어를 사용하지 않는 브라우저에 필요합니다.이 경우 -webkit-filter은 무시됩니다.

출처

2015-11-05 10:10:54 AxeEffect

관련 문제

 관련 문제