Safari에서 역방향 CSS3 애니메이션을 재생할 수 있습니까?

내가 틀렸다면 정정하십시오. 그러나 Safari에서 역 애니메이션이 작동하지 않음을 알아야합니다. 나는 이것에 대해 처음으로 묻는 사람은 아니었지만 나는 아직 답을 찾지 못했기 때문에 나는이 질문을 올렸다.Safari에서 역방향 CSS3 애니메이션을 재생할 수 있습니까?

Safari에서 반전 된 애니메이션을 만들 수있는 방법이 있습니까? 아니면 그냥 잊어 버려야합니까?

예 : Safari Developer docs 가입일

<!DOCTYPE html> 
 
<head> 
 
<style> 
 
div{ 
 
Background-color: red; 
 
font-size:2vw; 
 
position:fixed; 
 
top:40%; 
 
right:0%; 
 
width:100%; 
 
height:12%; 
 
/*animation*/ 
 
-webkit-animation:test_drive 5s; 
 
    -moz-animation:test_drive 5s; 
 
    -ms-animation:test_drive 5s; 
 
    -o-animation:test_drive 5s; 
 
     animation:test_drive 5s; 
 
/*animation-direction*/ 
 
-webkit-animation-direction:reverse; 
 
    -moz-animation-direction:reverse; 
 
    -ms-animation-direction:reverse; 
 
    -o-animation-direction:reverse; 
 
     animation-direction:reverse; 
 
z-index:3; 
 
} 
 
@-webkit-keyframes test_drive{ 
 
0% {left:0%; top:40%;} 
 
100% {left:0%; top:88%;} 
 
} 
 
@-ms-keyframes test_drive{ 
 
0% {left:0%; top:40%;} 
 
100% {left:0%; top:88%;} 
 
} 
 
@-moz-keyframes test_drive{ 
 
0% {left:0%; top:40%;} 
 
100% {left:0%; top:88%;} 
 
} 
 
@-o-keyframes test_drive{ 
 
0% {left:0%; top:40%;} 
 
100% {left:0%; top:88%;} 
 
} 
 
@keyframes test_drive{ 
 
0% {left:0%; top:40%;} 
 
100% {left:0%; top:88%;} 
 
} 
 
</style> 
 
<title>Test_Drive</title> 
 
</head> 
 

 
<body> 
 
    <div>Unlike Chrome, Firefox, Opera or IE, Safari plays this in "normal" direction.</div> 
 
</body> 
 

 
</html>

출처

2014-09-26 Andrej Ilic

귀하의 코드를 일부 변경했습니다. 아래 코드를 살펴보십시오. 잘 작동합니다.

<!DOCTYPE html> 
<head> 
<style> 
div{ 
Background-color: red; 
font-size:2vw; 
position:fixed; 
top:40%; 
right:0%; 
width:100%; 
height:12%; 
/*animation*/ 
-webkit-animation:test_drive 5s; 
    -moz-animation:test_drive 5s; 
    -ms-animation:test_drive 5s; 
    -o-animation:test_drive 5s; 
     animation:test_drive 5s; 
/*animation-direction*/ 
-webkit-animation-direction:normal; 
    -moz-animation-direction:reverse; 
    -ms-animation-direction:reverse; 
    -o-animation-direction:reverse; 
     animation-direction:reverse; 
z-index:3; 
} 
@-webkit-keyframes test_drive{ 
0% {left:0%; top:88%;} 
100% {left:0%; top:40%;} 
} 
@-ms-keyframes test_drive{ 
0% {left:0%; top:40%;} 
100% {left:0%; top:88%;} 
} 
@-moz-keyframes test_drive{ 
0% {left:0%; top:40%;} 
100% {left:0%; top:88%;} 
} 
@-o-keyframes test_drive{ 
0% {left:0%; top:40%;} 
100% {left:0%; top:88%;} 
} 
@keyframes test_drive{ 
0% {left:0%; top:40%;} 
100% {left:0%; top:88%;} 
} 
</style> 
<title>Test_Drive</title> 
</head> 

<body> 
    <div>Unlike Chrome, Firefox, Opera or IE, Safari plays this in "normal" direction.</div> 
</body> 

</html>

출처

2014-09-26 11:59:09 Ashish

이 고맙습니다. –

아직도, 나는 그것이 실제로 작동했는지 이해하지 못합니다. 모든 브라우저는 역순으로 재생합니다. –

당신은 투표했지만 내 실수로 나는 아래쪽 화살표를 클릭하여 평판을 잃었습니다. 다시 해보시겠습니까? – Ashish

는 사파리 normal (디폴트) 또는 alternate의 값 -webkit-animation-direction 지원한다. reverse을 지원하지 않습니다.

-webkit 애니메이션 방향 : 어느 동일한 방향마다 진행 또는 다른 방향에 애니메이션을 반복시킨다. 정상 (기본값) 또는 대체로 설정할 수 있습니다. 대체로 설정하면 애니메이션이 0에서 100 %까지 그리고 뒤로 반복적으로 100 %에서0 %로 진행합니다. 이 속성이 효과를 내기 위해서는 webkit-animation-iteration-count 값인 이 1보다 커야합니다.

출처

2014-09-26 11:37:56 rnevius

또한 브라우저 호환성에 대한 자세한 내용은 [모질라 개발자 문서를 (https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction#Browser_compatibility)를 참조하십시오. – rnevius

답변 해 주셔서 감사합니다. –

Safari에서 역방향 CSS3 애니메이션을 재생할 수 있습니까?

답변

관련 문제