CSS3 단방향 전환?

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

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

논리 흐름 :

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

내가 원하는 것 :

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

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

html css

— 아비 섹
소스

130

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!">

스 니펫 확장

— 매티 K
소스

도! 나 한테 이런 일이 일어나지 않았다는 게 믿기지 않아 ... 물론! 기본 전환은 0으로 설정되고 활성 상태 전환은 기본 값보다 우선합니다. 0.5 초로 설정되어 있습니다 ... 한숨 ... 커피 한 잔이 필요합니다 ...

— Abhishek

제 경우에는 호버 아웃이 아닌 호버 인시 지연 / 발생 전환을 원했습니다. 위의 내용을 읽은 후 해결책은 더 간단했습니다. : hover 규칙에 전환을 적용하고 다른 곳에서는 아무것도 취소 할 필요가 없습니다. 명확한 예를 들어 올바른 방향을 알려 주셔서 감사합니다.

— Schmuli

답변 해 주셔서 감사합니다. 테스트했지만 전환이 다른 방향으로 설정되었을 때 저에게

— 효과적이었습니다

감사합니다! 내가 너무 복잡하다고 생각 했나봐. opacityCSS 클래스 b가 있으면 요소를 "페이드 아웃"하고 CSS 클래스가 사라지면 변경 사항을 갑자기 표시하고 싶었 습니다 (전환 없음). 그래서 정의했습니다 .a { transition: ... 0s...; } .b { opacity: 0.5; } .b.a { transition: ... 2s ...; }. 이제 항상 CSS 클래스가 a첨부 된 요소 가 class를 가져 오면 b불투명도가 0.5로 사라지고 b갑자기 더 이상 나타나지 않으면 다시 전환되지 않습니다.

— Igor