배경 이미지 애니메이션

Question

탐색 막대 버튼에 애니메이션을 적용하려고합니다. 텍스트 (이미지)가 그대로 유지되는 동안 li 태그 배경의 이미지가 위아래로 튀어 나오게하고 싶습니다.

나는 배경 이미지에 애니메이션을 적용하는 직접적인 CSS 방법이 없다는 것을 알고 있지만이를 고려하려고 노력했습니다.

내 코드 아래의 JSFiddle 링크를 참조하십시오

http://jsfiddle.net/JTp6x/

#Home 
{ 
    position: absolute; 
    width:125px; 
    height:100px; 
    background: transparent url('Images/Icons/HomeIcon.png') no-repeat top center; 
-webkit-animation-fill-mode:both; 
-moz-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
-o-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:1s; 
-moz-animation-duration:1s; 
-ms-animation-duration:1s; 
-o-animation-duration:1s; 
animation-duration:1s;} 
.animated.hinge 
{ 
-webkit-animation-duration:2s; 
-moz-animation-duration:2s; 
-ms-animation-duration:2s; 
-o-animation-duration:2s; 
animation-duration:2s; 
} 

@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
     40% {-webkit-transform: translateY(-30px);} 
    60% {-webkit-transform: translateY(-15px);} 
} 

@-moz-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} 
    40% {-moz-transform: translateY(-30px);} 
    60% {-moz-transform: translateY(-15px);} 
} 

@-o-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);} 
    40% {-o-transform: translateY(-30px);} 
    60% {-o-transform: translateY(-15px);} 
} 
@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
} 

#Home:hover { 
    -webkit-animation-name: bounce; 
    -moz-animation-name: bounce; 
    -o-animation-name: bounce; 
    animation-name: bounce; 
} 

애니메이션 사실

Answer 1

의 애니메이션 방법과 키 프레임인가, 는 애니메이션을 가능하다 특정 조건이 충족되면 콘텐츠를 이동하지 않고 CSS의 배경 이미지를 표시합니다.

당신의 이미지에 대한 링크는 상대 링크이며, 코드에는 방해가되는 것들이 있습니다. 그래서 저는 처음부터 위키 미디어 공유에 이미지를 사용하는 새로운 피들을 만들었습니다. 같은 효과를 얻을 수 있었다. 귀하가하신 말씀을 토대로 <li> 요소에 넣고 대략 @keyframes을 재사용합니다.

바이올린은 여기에 있습니다 : http://jsfiddle.net/raphaelvalerio/SbAkP/는

<ul> 
    <li id="bouncy-background">stuff that absolutely should not move at all in any way. Ever.</li> 
    <li>another item</li> 
    <li>another item</li> 
</ul> 

는 (간결함을 제거 공급 업체 접두사와 전체 버전의 바이올린을 참조하십시오.) CSS

:

는

#bouncy-background { 
width: 100%; 
height: 400px; 
background-color: goldenrod; 
background-image: url('http://upload.wikimedia.org/wikipedia/commons/7/71/William_Shatner.jpg'); 
background-repeat: no-repeat; 
background-size: auto 200px; 
background-position: center bottom; 
animation-name: bounce; 
animation-duration: 2s; 
animation-fill-mode: both; 
} 

@keyframes bounce { 
0%, 20%, 50%, 80%, 100% {background-position: center bottom;} 
40% {background-position: center top;} 
60% {background-position: center 75%;} 
} 

여기서 중요한 것은 입니다 무엇 당신이 움직이고 있어요. 백분율, 픽셀 등의 값을 계산 한 대부분의 요소에 애니메이션을 적용 할 수 있습니다.이 경우 계산 된 값이므로 배경 자체는 아니지만 background-position 규칙에 애니메이션을 적용합니다.

바이올린을 확인하고 그 주위를 놀고 당신이 마음에있는 것에 맞는 제법을 변경할 수 있는지 확인하십시오.

애니메이션은 현재로드시 간단히 시작되지만, :hover과 같은 의사 선택기 이벤트에 연결할 수 있습니다.