Hover off animation?

Question

How do I do the inverse animation when I "hover off" the .child element (css3 only if possible)?

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

http://stackoverflow.com/questions/16516793/css3-reverse-animation-on-mouse-out-after-hover — vp_arth, Nov 21 '14 at 16:32

score 2 · Accepted Answer · answered Nov 21 '14 at 16:42

The easiest way would be to use transition instead of 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>

Comes with auto-reverse built in. Much less code.

score 0 · Answer 2 · answered Nov 21 '14 at 16:43

0

Don't use animation, use transition

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

Fiddle

answered Nov 21 '14 at 16:43

Tamás

950
2
10
29

score 0 · Answer 3 · answered Nov 21 '14 at 16:50

Well, you can do that. But you'll need a default animation too.

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

Hover off animation?

Fiddle

3 Answers3