Animate.css 및 고정 위치

Question

http://jsfiddle.net/2nzp8835/1/과 같은 간단한 마크 업이 있습니다. expand을 클릭하면 "full screened"가됩니다. 그런 다음 animate.css를 사용하여 애니메이션 페이드 인을 http://jsfiddle.net/ph1rvh6p/1/ 및 expand과 같이 추가했습니다.
이유를 알 수 없습니다. 고정 위치 요소와 함께 animate.css를 둘 다 사용할 수 있습니까?

Answer 1

나는 그것을 고친다. 그러나 나는 아직도 그것을 이해할 수없는 몇 가지 이유가있다.
내 솔루션은 여기에 있습니다 : JSFiddle.는

key 속성은 CSS3 속성의 vw 및 vh

.fullscreen-mode{ 
    height: 100vh; 
    left: -10px; 
    position: fixed; 
    top: -10px; 
    width: 100vw; 
    z-index: 99999; 
} 

입니다. IE8 ~ IE9를 고려하면 효과가 없을 수 있습니다. 하지만 Chrome과 FF에서는 잘 작동합니다. 세부 이유를 찾으려고합니다. 다음은 몇 가지 단서이다 :
animation.css에서 이러한 클래스 I 이들 중 일부를 제거

.fadeInRight { 
     animation-name: fadeInRight; 
    } 
    .animated { 
     animation-duration: 1s; 
     animation-fill-mode: both; 
    } 

을 사용했다. 그리고 효과가 돌아올 것입니다. 따라서 애니메이션은 페이지 흐름을 재정의하여 용도가 효과를 내지 못하게합니다. 라는 이름의 클래스가 애니메이션 및 방법 :

---

은 여기에 첨부 할 질문이다. fadeInRight animation.css의 효과 페이지 흐름? 누군가 도와 드릴 수 있기를 바랍니다.