css - 多个元素上的 CSS3 动画问题

Question

我需要在父元素的“悬停” Action 上为两个元素设置动画。

JS fiddle 是: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;}}

我需要星星旋转并且“ View ”应该出现。一旦宽度达到最大限制，它应该保持在最大限制，星形应该停止旋转。

请帮我解决这个问题。

Answer 1

将您的显示属性更改为inline-block。

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

这是 fiddle :http://jsfiddle.net/qrmWA/1/