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。

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

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

CSS3动画在多个元素上的问题

1 个答案: