CSS 전환, 작동 원리

CSS 전환 및 이미지 호버 효과가있는 간단한 코드가 있습니다. Codepen Demo CSS 전환, 작동 원리

background-color: rgba(0, 0, 0, 0.22); 
    -webkit-transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease-in; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease; 
    visibility:hidden; 
    overflow:hidden;

당신은 나에게 설명해 주 시겠어요 :이 부분의 원인은 바로 애니메이션

왼쪽 이유는 무엇입니까? (분명히 "모든"속성)
```
transition: all 0.2s ease; 
```
가 어떻게 그것을 간단한 페이드을 대신 왼쪽/오른쪽으로 이동 변경할 수 있습니다 ? jQuery를 사용해야합니까? .item:hover .overlay 및 .item .overlay의 위치가 모두 '왼쪽 : 0]'때문에 오른쪽

감사 크리스

출처

2017-03-23 Kris Zap

이러한 공급 업체 접두사는 모두 필요하지 않습니다. –

나는 -moz-와 -o-를 제거 할 수 있다는 것을 의미합니까? 다른 브라우저에서도 여전히 작동합니까? –

http://shouldiprefix.com/#transitions를 참조하십시오. –

왼쪽은 둘 다 'right : 0;'로 변경하면 더 JQuery와 페이드 효과를 필요하지 않습니다
을 오른쪽에서 왼쪽으로 애니메이션을 얻을, 당신은 단지 .item:hover .overlay

출처

2017-03-23 08:29:46 goosmaster

알았어, 그리고 맨 아래쪽 애니메이션은 어떨까? –

@KrisZap 다음으로 높이와 높이를 변경해야합니다. 너비를 100 %로 변경하고 높이를 0 %로 변경하면 .item .overlay 0 %의 너비가 위쪽에서 아래쪽으로 적용됩니다. – goosmaster

@KrisZap 더 이상의 질문이 있으십니까? 아니면 내가 그들 모두에게 대답 했습니까? – goosmaster

에 .item .overlay 및 불투명도 1에서 두 개의 CSS 속성 (불투명도) 불투명도 0을 추가 할 수 있습니다 당신의 CSS 다음과 같이 변경합니다

.item .overlay { 
    position: absolute; 
    left: 0%; 
    top:0; 
    width: 0%; 
    height: 100%; 
    opacity:0; 
    background-color: rgba(0, 0, 0, 0.22); 
    -webkit-transition: opacity .3s ease-in-out; 
    -moz-transition: opacity .3s ease-in-out; 
    -o-transition: opacity .3s ease-in-out; 
    transition: opacity .3s ease-in-out; 
    overflow:hidden; 

}

그리고 호버에를

.item:hover .overlay { 
    top: 0; 
    left: 0; 
    visibility: visible; 
    width: 100%; 
    height: 100%; 
    opacity: 1; 
}

Updated codepen demo

출처

2017-03-23 08:31:12

CSS 전환, 작동 원리

답변

관련 문제