동일한 요소의 여러 전환이 작동하지 않습니다.

동일한 요소에서 예상대로 작동하는 두 개의 전환이 있지만 다른 전환은 호버에서 작동하지 않습니다. 전환 효과를 얻으려면 어떻게해야합니까?동일한 요소의 여러 전환이 작동하지 않습니다.

CSS 코드 :

.ArrowNext 
{ 
    top:40%; 
    right:14%; 
    background:rgba(0,0,0,0.7); 
    width:200px; 
    height:200px; 
    position:absolute; 
    cursor:pointer; 

    transition: right 1s; /* Wont work*/ 
    transition: background 1s; 
} 
.ArrowNext:hover 
{ 
    right:11%; /* Wont work*/ 
    background:rgba(255,255,255,0.7); 
}

출처

2014-10-09 Pedro Alejandro Mir Cabrera

여러 개의 전환은 쉼표로 구분 된 형식으로 제공되어야하며 다른 전환은 다른 형식보다 적어야합니다. – Harry

질문을 좀더 명확하게하기 위해 제목과 설명을 수정했습니다. 수정 내용이 잘못되었다고 생각되면 롤백하십시오. – Harry

경우에 따라 '전환 전체'가 도움이 될 수 있습니다. –

두 번째 선언은 첫째을 무시한다. 대신 여러 transition의 분리 선언

, 당신은 그들을 함께 선언

transition : right 1s ease-out, background 1s ease-out;

당신은뿐만 아니라 방법을 완화하여 재생한다. 그들은 실제로 애니메이션의 "느낌"을 바꿀 수 있습니다.

또한, 벤더 접두사에 대해 잊지 마세요 :

-webkit-transition : right 1s ease-out, background 1s ease-out; 
-moz-transition : right 1s ease-out, background 1s ease-out; 
-o-transition  : right 1s ease-out, background 1s ease-out; 
transition   : right 1s ease-out, background 1s ease-out;

을 여기 transition의에서 탁월한 문서입니다 : https://developer.mozilla.org/en-US/docs/Web/CSS/transition

가 그리고 당신은 CSS에 익숙하기 때문에 당신이 체크 아웃해야 http://caniuse.com을, 브라우저 호환성을 결정하는 훌륭한 리소스입니다.

출처

2014-10-09 02:59:37 Jasper

Perfect, Thanks alot –

@PedroAlejandroMirCabrera 환영합니다. 도움이 될만한 몇 가지 사항도 업데이트되었습니다. – Jasper

Safari 5.1과 같은 일부 브라우저의 구버전을 지원하고 싶지 않다면, 자신이 문서를 인용하는 바로 그 리소스 (caniuse)로서, 벤더 접두사는'transition'을 위해 ** 필요하지 않습니다 ** (단지' -webkit-'). 또한 수정 된 '전환'은 '1 초 완화'를 반복하기 때문에 DRY가 아닙니다. 따라서 '전환 지속 시간', '전환 타이밍 기능'및 '전환 속성'으로 해당 속성을 개별적으로 지정하는 것이 약간 더 낫습니다. –

동일한 요소의 여러 전환이 작동하지 않습니다.

답변

관련 문제