바운스 애니메이션이 작동하지 않습니다.

Question

이미지가 포함 된 <div>을 반송하려고하는데 작동하지 않으며 이유가 확실하지 않습니다.

@keyframes bounce 
{ 
    from { 
     left: 0px; 
    } 
    to { 
     right: 30px; 
    } 
} 

@-moz-keyframes bounce /* Firefox */ 
{ 
    from { 
     left: 0px; 
    } 
    to { 
     right: 30px; 
    } 
} 

@-webkit-keyframes bounce /* Safari and Chrome */ 
{ 
    from { 
     left: 0px; 
    } 
    to { 
     right: 30px; 
    } 
} 

#DanielFace 
{ 
    background-repeat: no-repeat; 
    width: 145px; 
    height: 165px; 
    background-image: url(../images/daniel/fun.png); 
    animation: bounce 1s; 
    -moz-animation: bounce 1s; /* Firefox */ 
    -webkit-animation: bounce 1s; /* Safari and Chrome */ 
} 

Answer 1

두 가지 때문입니다.

첫 번째 left과 right은 해당 CSS에 지정된 개체를 사용하지 않습니다. 이 값은 요소의 position이 static (기본값) 이외의 값인 경우에만 적용됩니다.

두 번째로 충돌하는 값이므로 찾고있는 애니메이션 효과를 얻지 못할 수 있습니다. 지금 말하고있는 것은 기본적으로 정적 인 폭을 주었기 때문에이 요소를 늘리는 것입니다. 이미지가 귀하의 페이지에서 정확히 수행되기를 원하십니까?

Answer 2

이유는 두 개의 서로 다른 특성, right 및 left을 사용하고 있습니다 :

이

내 코드입니다. 둘 다 위치를 지정하지만 동일한 속성을 사용하여 전환을 수행해야합니다. 컨테이너가 고정 너비이면 간단합니다. right 대신 left을 사용하거나 from 및 to에 대해 그 반대를 사용하십시오.

반면에 너비가 동적 인 경우 운이 다되었습니다. 대신 JavaScript를 사용하십시오.