CODEWITHSUNDEEP
htmlcsshover
azhpo
azhpo

Reputation: 802

Hover off animation?

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

Upvotes: 0

Views: 157

Answers (3)

amiry jd
amiry jd

Reputation: 27585

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.

Upvotes: 0

Tam&#225;s
Tam&#225;s

Reputation: 1112

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

Upvotes: 0

Turnip
Turnip

Reputation: 36632

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.

Upvotes: 2

Related Questions