Наведите указатель мыши на анимацию?

Question

Как сделать обратную анимацию, когда я «отключаю» элемент .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:

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

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

<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>

Поставляется с автоматической обратной встраивается. Гораздо меньше кода.

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

Ну, вы можете сделать это. Но вам также понадобится анимация по умолчанию.

.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); 
 
    } 
 
}

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

See the working example.