CSS3 전환 페이드 아웃이 발생하지 않음

순수 CSS를 사용하여 내 div를 페이드 아웃하려고합니다. 하지만 아무것도하지 않으면 불투명도가 변하지 않습니다.CSS3 전환 페이드 아웃이 발생하지 않음

내 코드가 잘못되었습니다.

-webkit-transform: opacity: 0; -moz-transform: opacity: 0;

불투명도가 "변화"와 함께 사용할 수있는 것이 아닙니다 :

<html> 
<head> 
    <style type="text/css"> 
    body { 
     background-color: red; 
    } 

    #box{ 
     width: 300px; 
     height: 300px; 
     background-color: green; 
     -moz-box-shadow: 0px 0px 5px 5px #cc6600; 
     -webkit-box-shadow: 0px 0px 5px 5px #cc6600; 
     -webkit-transition: opacity 5s; 
     -webkit-transform: opacity: 0; 
     -webkit-transition-delay: 1s; 
     -moz-transition: opacity 5s; 
     -moz-transform: opacity: 0; 
     -moz-transition-delay: 1s; 
    } 
    </style> 
</head> 
<body> 

<div id="box"> 
Insert your content in here... 
</div> 


</body> 
</html>

출처

2011-12-13 Jake M

이 라인은 유효하지 않은 구문입니다. 변환을 사용할 수있는 방법에 대한 설명은 here을 참조하십시오. 또한 변형은 오브젝트가 사라지는 불투명도 전이를 위해 여기에 필요한 것이 아닙니다.

또한 CSS3 전환은 객체가 한 상태에 있고 두 번째 상태가 적용되면 (종종 객체에 클래스를 추가하여) 트리거됩니다. 이 두 번째 상태는 다른 CSS 규칙 집합을 지정하며 객체는 전환 설정에 따라 첫 번째 상태에서 두 번째 상태로 "전환"할 수 있습니다.

#box CSS 규칙에서 객체에 대해 하나의 상태를 지정했습니다. 전환을 원할 경우 두 번째 상태를 지정하고 두 번째 상태를 적용하는 이벤트를 지정해야합니다. 마우스가 공중 선회 할 때

예를 들어, CSS는 상자를 페이드 아웃 것이다 : 여기에 마우스를 가져가 및 전환에 의해 트리거 전환 모두의 데모 작업

#box{ 
    width: 300px; 
    height: 300px; 
    background-color: green; 
    -moz-box-shadow: 0px 0px 5px 5px #cc6600; 
    -webkit-box-shadow: 0px 0px 5px 5px #cc6600; 

    -webkit-transition: opacity 3s; 
    -moz-transition: opacity 3s; 
} 

#box:hover { 
    opacity: 0; 
}

이 버튼을 통해 클래스를 추가하는 트리거 클릭 : http://jsfiddle.net/jfriend00/ZWG5Y/.

이 데모에서는 시작 상태가 있고 몇 가지 전환 매개 변수를 지정합니다. 그런 다음 두 번째 상태 (여기서 마우스를 가리키면 트리거 됨)에서 두 번째 상태가 적용될 때 개체가 전환 될 두 번째 상태를 지정합니다.

-webkit-transform: opacity: 0; 

-moz-transform: opacity: 0;

출처

2011-12-13 23:28:58 jfriend00

여분의 콜론이 두 줄 "불투명도"후인가

출처

2011-12-13 23:29:06 nnnnnn

CSS3 전환 페이드 아웃이 발생하지 않음

답변

관련 문제