[html] CSS3 단방향 전환?

Program / 글쓴이

CSS3 전환을 사용하면 모든 속성에 ‘부드럽게’및 ‘부드럽게’효과를 낼 수 있습니다.

‘부드러운 다운’효과 만 갖도록 설정할 수 있습니까? 가능한 경우 JavaScript를 피하고 CSS로만 솔루션을 만들고 싶습니다.

논리 흐름 :

  • 사용자 클릭 요소
  • 전환은 배경색을 흰색에서 검은 색으로 변경하는 데 0.5 초가 걸립니다.
  • 사용자가 마우스 왼쪽 버튼을 놓음
  • 검은 색에서 흰색으로 배경색을 변경하는 데 0.5 초가 걸립니다.

내가 원하는 것 :

  • 사용자 클릭 요소
  • 전환하는 데 0 초가 걸립니다.
  • 사용자가 마우스 버튼을 놓음
  • 전환하는 데 0.5 초가 걸립니다 …

‘전환’시간은 없지만 ‘전환’시간이 있습니다.

답변

CSS3 Tryit Editor에서 다음을 시도했고 Chrome (12.0.742.60 beta-m)에서 작동했습니다.

/* transition out, on mouseup, to white, 0.5s */
input
{
  background:white;
  -webkit-transition:background 0.5s;
  -moz-transition:background 0.5s;
  -ms-transition:background 0.5s;
  -o-transition:background 0.5s;
  transition:background 0.5s;
}

/* transition in, on click, to black, 0s */
input:active
{
  background:black;
  -webkit-transition:background 0s;
  -moz-transition:background 0s;
  -ms-transition:background 0s;
  -o-transition:background 0s;
  transition:background 0s;
}
<input type="button" value="click me to see the transition effect!">

스 니펫 확장

답변