여러 요소에 CSS3 애니메이션 문제가 발생했습니다

Question

상위 요소의 "마우스 오버"동작에서 두 요소를 애니메이션화해야합니다.

JS 바이올린은 다음과 같습니다 here

나는 여기에 같은 코드를 포함했다 : 여기

을 내 HTML 코드 :

<div class="dealList"><a href="#" title="View Deal" class="viewDeal"><span>&nbsp;</span>View</a></div> 

그리고 CSS3는

입니다

-webkit-animation-name: expand;-webkit-animation-duration: 1s;-webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: expand;  -moz-animation-duration: 1s;  -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear;}.dealList .viewDeal span{ display: inline-block; width: 14px; height: 14px; background: url(../images/star_view.png) no-repeat; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s;}.dealList .viewDeal:hover span{ -webkit-animation-name: rotate;  -webkit-animation-duration: 2s;  -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: rotate; -moz-animation-duration: 2s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear;}@-webkit-keyframes rotate { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(-360deg);}}@-moz-keyframes rotate { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(360deg);}}@-webkit-keyframes expand { from {width: 14px;} to {width: 80px;}}@-moz-keyframes expand { from {width: 14px;} to {width: 80px;}} 

회전하려면 별이 필요하며 "보기"가 있어야합니다. 너비가 최대 한도에 도달하면 그 값을 유지해야하고 별이 회전을 멈춰야합니다.

이 문제를 해결하려면 저를 도우십시오.

Answer 1

디스플레이 속성을 inline-block으로 변경하십시오. 이 나타나면 http://jsfiddle.net/qrmWA/1/ 사실