CSS3多元素动画的问题

Question

我需要在父元素的"hover"动作上创建两个元素的动画

JS fiddle is: 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。

.dealList .viewDeal{
    display: inline-block; 
    ...

这里是小提琴:http://jsfiddle.net/qrmWA/1/