Thats work
HTML
<div class="fadeInLeftBig animated">
<div class="swipe-button b-left animated"></div>
</div>
CSS
.swipe-button.b-left {
left: 10px;
background-color: blue;
width: 50px;
height: 50px;
}
.swipe-button:hover {
-webkit-animation: rotate .4s forwards;
-moz-animation: rotate.4s infinite;
-ms-animation: rotate.4s infinite;
-o-animation: rotate.4s infinite;
animation: rotate.4s forwards;
}
@keyframes rotate{
0% { transform: rotate(0deg); }
100% { transform: rotate(45deg); }
}
.fadeInLeftBig {
animation-name: fadeInLeftBig;
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
transform: translateX(-2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.animated {
animation-duration: 1s;
animation-fill-mode: forwards;
}