다른 div의 호버를 사용하여 css3에서 div 애니메이션을 만드는 방법은 무엇입니까?

그래서이 CSS3 애니메이션은 div "집"위로 마우스를 가져 가면 0px, 47px, 47px, 47px에서 "label"클래스로 div를 축척하기로되어 있습니다. 작동하지 않는 점을 제외하면 , 그리고 나는 이유를 모른다.다른 div의 호버를 사용하여 css3에서 div 애니메이션을 만드는 방법은 무엇입니까?

<style type="text/css"> 
@keyframes labels { 
    0% {width:0px; height:47px} 
    100% {width: 170px; height:47px} 
} 
.hover{ 
} 
.hover:hover{ 
    background-size: contain; 
    transition: 0.5s ease-in-out; 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
    cursor:pointer; 
} 
#house{ 
    width: 4em; 
    height: 4em; 
    padding: 2em; 
    background-color: #069; 
    border: thick solid #FC0; 
    color: #09C; 
    text-decoration: underline overline; 
    position: absolute; 
    top: 4em; 
    left: 4em; 
} 
.label{ 
    position: absolute; 
    width: 0px; 
    height: 47px; 
    background-image: url(tests-02.png); 
    background-repeat: no-repeat; 
    top: 5em; 
    left: 47px; 
    background-size: 100%; 
} 
#house:hover .label{ 
    animation:labels; 
    -webkit-animation:labels; 
} 
</style> 
</head> 
<body> 
<div id="house" class="hover">TEST</div> 
<div class="label"></div> 
</body>

이 지역의 내가 대신 jsfiddle

http://jsfiddle.net/YFRHR/

출처

2013-06-11 Tom B

귀하의 질문의 제목이 오해의 소지가있는 검은 색 배경으로 "라벨"을 작성하기 때문에 사진이로드되지 않습니다. 당신이 문제 :

1) 애니메이션 구문, 웹킷 지원 누락없는 속성

.hover:hover + .label{ 
animation: labels 1s infinite; 
-webkit-animation: wlabels 1s infinite; 
}

2)가 :

@-webkit-keyframes wlabels { 
    0% {width:0px; height:47px} 
    100% {width: 170px; height:47px} 
} 
@-keyframes labels { 
    0% {width:0px; height:47px} 
    100% {width: 170px; height:47px} 
}

그러나 호버 자체 노력하고 있습니다.

update fiddle

출처

2013-06-11 16:54:13 vals

오, 죄송합니다. 누락 된 속성에 대해 알지 못했습니다. 이것은 훌륭하게 작동하지만 어떻게하면 호버 당 한 번만 반복 할 수 있습니까? –

좋아요. 그래서 무한대를 1로 바꿨지 만 한 번 재생하면 원래의 0px 와이드 모드로 돌아갑니다. 호버링이 끝날 때까지 어떻게하면 170 픽셀을 유지할 수 있습니까? –

신경 쓰지 마세요. 도와 주셔서 감사합니다. –

다른 div의 호버를 사용하여 css3에서 div 애니메이션을 만드는 방법은 무엇입니까?

답변

관련 문제