Rotate icon with css on mouse hover - html

Question

After checking out I implemented below code but the effect is not happening, don't know where its lacking..
<style>
.rotate {
-webkit-transition: -webkit-transform 0.4s ease-in-out;
-moz-transition: -moz-transform 0.4s ease-in-out;
-o-transition: -o-transform 0.4s ease-in-out;
-ms-transition: -ms-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
cursor:pointer;
}
.rotate:hover {
color:#afafaf;
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
</style>
HTML
<div class="col-lg-6 col-md-6 col-sm-12">
<h2 align="center"> <icon class="icon icon-rocket icon-2x "> </icon> <br />
Build your Resume </h2>
</div>
Edit: changed the rotate CLASS from icon to parent

Answer 1

It will work with animation:
<div class="col-lg-6 col-md-6 col-sm-12">
<h2 align="center"> <icon class="icon icon-rocket icon-2x "> </icon> <br />
Build your Resume </h2>
</div>
CSS:
.rotate {
cursor:pointer;
}
.rotate:hover {
color:#afafaf;
-moz-animation: spin .4s 1 linear;
-o-animation: spin .4s 1 linear;
-webkit-animation: spin .4s 1 linear;
animation: spin .4s 1 linear;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
}
#-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); }
}
#-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); }
}
#-ms-keyframes spin {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(359deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}