«css-transitions» 태그된 질문

아래 바이올린에서 가시성과 불투명도를 개별적으로 전환했습니다. 후자는 작동하지만 전자는 작동하지 않습니다. 또한 가시성의 경우 전환 시간은 마우스 오버시 지연으로 해석됩니다. Chrome과 Firefox 모두에서 발생합니다. 이것은 버그입니까? http://jsfiddle.net/0r218mdo/3/ 사례 1 : #inner{ visibility:hidden; transition:visibility 1000ms; } #outer:hover #inner{ visibility:visible; } 사례 2 : #inner1{ opacity:0; transition:opacity 1000ms; } #outer1:hover #inner1{ opacity:1; …

102 css  css-transitions 

CSS 전환이 완료되면 알림 (예 : 콜백)을받을 수 있습니까?

100 javascript  css  css-transitions 

순수 CSS에서 "페이드 아웃"효과를 구현하려고합니다. 여기에 바이올린이 있습니다. 온라인에서 몇 가지 솔루션을 살펴 보았지만 온라인 설명서를 읽은 후 슬라이드 애니메이션이 작동하지 않는 이유를 파악하려고합니다. 포인터가 있습니까? .dummy-wrap { animation: slideup 2s; -moz-animation: slideup 2s; -webkit-animation: slideup 2s; -o-animation: slideup 2s; } .success-wrap { width: 75px; min-height: 20px; clear: both; margin-top: …

98 css  css-transitions 

Webkit의 전환 종료 이벤트는 webkitTransitionEnd, Firefox는 transitionEnd, Opera는 oTransitionEnd입니다. 순수 JS에서 모두를 다루는 좋은 방법은 무엇입니까? 브라우저 스니핑을해야합니까? 또는 각각을 개별적으로 구현 하시겠습니까? 나에게 발생하지 않은 다른 방법? 즉 : //doing browser sniffing var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd"; element.addEventListener(transitionend, function(){ //do …

91 javascript  css  css-transitions  dom-events 

일정 시간 후에 슬라이드되는 div에 대한 CSS 애니메이션이 있습니다. 내가 원하는 것은 몇 개의 div가 슬라이드되는 애니메이션 div의 공간을 채우는 것입니다. 그러면 해당 요소가 페이지 아래로 푸시됩니다. 내가 첫 번째 div에서 이것을 시도하면 슬라이드가 보이지 않아도 여전히 공간을 차지합니다. div를 div로 변경하면 display:none전혀 슬라이드되지 않습니다. 들어올 때까지 (타이밍을 위해 CSS를 …

84 css  css-transitions  animate.css 

난에서 전환 사용하여 CSS3 실험에 6000 개 작은 DIV 요소를 이동하고 top: 0로 top: 145px테스트 성능을. 하드웨어 가속을 사용 하지 않으면 Chrome에서 원활하게 실행됩니다. translateZ(0)성능을 통해 하드웨어 가속을 활성화 하면 끔찍해집니다. 왜 이렇게이다? 다음은 내 예제 코드입니다. http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html 업데이트 (2014-11-13) :이 질문이 여전히 주목을 받고 있기 때문에 언급 된 끊김 …

82 css  css-transitions  hardware-acceleration 

css3 전환 속성의 렌더링 속도에 대한 질문이 있습니다. 여러 요소가 있다고 가정합니다. div, span, a {transition: all} div {margin: 2px} span {opacity: .5} a:hover {background-position: left top} div:hover {margin: -100px} span:hover {opacity: 1} a:hover {background-position: -5px top} 하나의 선언을 사용하여 모든 요소에 대한 모든 전환을 대상으로 지정하는 것이 훨씬 더 …

82 performance  css  css-transitions 

CSS 전환 상태를 전환하기 위해 CSS 전환을 사용하고 있습니다 (기본적으로 요소의 크기 전환). 요소가 전환 될 때 페이지의 나머지 텍스트 (Webkit에서)는 전환이 완료 될 때까지 렌더링을 약간 변경하는 경향이 있습니다. 바이올린 : http://jsfiddle.net/russelluresti/UeNFK/ 나는 또한 이것이 -webkit-font-smoothing: antialiased속성 / 값 쌍이 있는 내 헤더에서 발생하지 않는다는 것을 알았 습니다. 그래서 …

81 css  webkit  css-transitions  css-transforms 

설정 페이지 역할을하는 양식이 있습니다. 양식 요소가 수정되면으로 표시되고 unsaved테두리 색상이 다릅니다. 양식이 저장되면 다른 테두리 색상을 사용하여 저장된 것으로 표시됩니다. 내가 원하는 것은 양식이 저장되면 테두리가 점차 사라질 것이라는 것입니다. 주문이 진행됩니다. <input type='text' class='unsaved' /> Not saved yet, border is yellow <input type='text' class='saved' /> Saved, so the …

79 css  css-transitions 

선택한 div를 확장하고 나머지 공간에 맞게 동일하게 확장하여 다른 div를 적절하게 작동시킬 수있는 스크립트 (여기서는 사용자의 도움으로)를 코딩했습니다 (너비가 고정 된 첫 번째 제외). 그리고 여기 내가 달성하고자하는 그림이 있습니다. 이를 위해 플렉스와 전환을 사용합니다. 잘 작동하지만 jQuery 스크립트는 "400 %"스트레치 값을 지정합니다 (테스트에 적합 함). 이제 선택한 div를 "400 …

9 javascript  jquery  css  flexbox  css-transitions