将鼠标悬停在动画上？

Question

当我＆＃34;将鼠标悬停时，如何进行逆动画？ .child元素（仅在可能的情况下为css3）？

的 Fiddle

HTML：

<div class="child">
    <i class="fa fa-video-camera spin" style="font-size:22px;"></i>
</div>

CSS：

.child:hover .spin{
    -webkit-animation: spin 0.2s linear;
    -moz-animation: spin 0.2s linear;
    -o-animation: spin 0.2s linear;
     animation: spin 0.2s linear;        
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }    
}

Answer 1

最简单的方法是使用transition代替keyframes：

＆＃13;

＆＃13;

.child .spin {
    transition: transform .2s linear;
}

.child:hover .spin{
     transform: rotate(360deg);
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="child">
    <i class="fa fa-video-camera spin" style="font-size:22px;"></i>
</div>

＆＃13;

＆＃13;

＆＃13;

内置自动反转。代码少得多。

Answer 2

不要使用动画，请使用转换

<div class="camera"></div>
<style>
.camera{
height: 100px;
width: 50px;
background-color: red;
transition: 2s;
}
.camera:hover{
transform: rotate(360deg);
}
</style>

Fiddle

Answer 3

嗯，你可以做到。但是你也需要一个默认动画。

＆＃13;

＆＃13;

.child{
    margin-top:20px;
    margin-left:20px;
}
.child .spin{
  -webkit-animation: spin 0.5s ease-in-out;
  -moz-animation: spin 0.5s ease-in-out;
  -o-animation: spin 0.5s ease-in-out;
  animation: spin 0.5s ease-in-out;
}

.child:hover .spin{
  -webkit-animation: spinh 0.5s ease-in-out;
  -moz-animation: spinh 0.5s ease-in-out;
  -o-animation: spinh 0.5s ease-in-out;
  animation: spinh 0.5s ease-in-out;

}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(360deg);
  }
  to {
    -moz-transform: rotate(0deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes spinh {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spinh {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

＆＃13;

<div class="child">
  <i class="fa fa-video-camera spin" style="font-size:22px;"></i>
</div>

＆＃13;

＆＃13;

＆＃13;

See the working example