CSS를 사용하여 전환 후 요소를 숨기기

Question

안녕하세요, 저는 로그인 양식을 디자인하려고했지만 버튼에는 약간의 전환 효과가 필요합니다.

하나의 복잡성이 있습니다.

배경 : 주요 컨테이너 패딩 (왼쪽 및 오른쪽)이없는 방법 original form

통지, 지금 내 데모 패딩이 남아있는 것이 중요했다이 : 내가 원래 여기에서이 아이디어를 복사 문제를 만든다 (더 설명 할 것이다).

지금을 heres 내 데모 :

My version of login form (나는 내 ​​문제 아래에 관련된 코드를 붙여 넣을 수 있습니다 CSS 코드의 108 개 라인을 무서워하지 않습니다). 다음과 같이

그래서 코드 먹으 렴이 문제에 revevant은 다음과 같습니다

HTML 코드 :

<button class="login-button"><span>SEND</span></button> 

CSS 코드 : 내가 CSS 스타일에 가면 지금

.login-button{ 
    width: 100%; 
    outline: none; 
    border:none;  
    cursor: pointer; 
    padding: 0; 
    margin:0; 
    transition:.3s; 
} 

.login-input , .login-button{ 
    height: 50px; 
    line-height: 40px; 
    transition:.3s; 
} 

.login-button span{ 
    display: block; 
    background:red; 
    height: 100%; 
    width: 100%; 
    left: 0; 
    transition:.3s; 
    position: relative; 
} 

.login-button span:before{ 
    content: 'ok'; 
    position: absolute; 
    left: 100%; 
    display: block; 
} 

.login-button:hover span:before{ 
    content: 'OK To go now'; 
    position: absolute; 
    /*left: 0%;*/ 
    text-align: center; 
    display: block; 
    width: 100%; 
    height: 100%; 
} 

주 용기 용 :

IE

.main-login{ 
    min-width: 200px; 
    max-width: 400px; 
    background: #533e69; 
    margin: 100px auto; 
    text-align: center; 
    overflow: hidden; 
    box-shadow: 1px 1px 10px rgba(0,0,0,.2); 
    padding: 0 20px; 
} 

패딩을 벗으십시오. BHAM !!!! 문제가 해결되고 전환이 완벽 해 보입니다.

인한 문제 :

내 요구 사항은 버튼 위에 마우스와 스팬 요소가 left:-100% 이동할 때 그래서 지금 무슨 일이 주요 컨테이너는 여전히 볼 수 있습니다, 내가 그 패딩이 필요하다는 등이다.

솔루션

내가이 문제는 내가하지 eally 링크 어수선 않습니다으로 CSS에서 해결 될 수있는 경우

잘 내가 그것을 싶습니다 제안 내 문서의 JS와. 어떻게 이것에 대해 :

내 솔루션 덜 우아한 될 수 있도록 전, CSS 새로운 오전 :

버튼 위에 맴돌고

, 스팬 오버 left:-100%이와 스팬이 display:none로 설정 될 수있는 경우보다 간단한 소리 ,하지만 CSS의 제한된 지식은 나를 여기 붙어있어.

글쎄, 누군가 내게 더 좋은 해결책을 줄 수 있다면 내 문제를 잘 요약했으면 좋겠다.

감사합니다.

알렉산드.

.nav a { 
    -webkit-transition: color .2s, text-shadow .2s; 
    /* And so on... */ 
} 

용이성은 기본, 그래서 당신은 그것을 지정할 필요가 없습니다 :

Answer 1

입니다. 전환이 display 속성에 애니메이션을 적용하는 것은 불가능합니다.

이 CSS 코드를 추가하고 그것을 작동합니다 :

.login-button:hover span{ 
    -webkit-transition-delay: 1s; /* Safari */ 
    transition-delay: 1s; 
    transition: 2s; 
    background: rgba(1,1,1,0); 
} 

가 업데이트 된 바이올린 here를 참조하십시오.

편집 :

.login-button:hover span{ 
    transition: 0.3s; 
    background: transparent; 
} 

바이올린이 here입니다 : 나는 조금을 CSS를 정리.

Answer 2

전환 속성 전환을 지원하는 모든 브라우저에서 쉼표로 구분된다. 선형을 실제로 원하는 경우이를 지정해야합니다 (예 : -webkit-transition : color .2s linear, text-shadow .2s linear).

Or try this 
    transition-property: width; 
    transition-duration: 1s; 
    transition-timing-function: linear; 
    transition-delay: 2s; 

이

당신은 투명하게 배경을 설정해야 link