Click here to Skip to main content
15,847,653 members
Please Sign up or sign in to vote.
2.00/5 (1 vote)
See more:
i have two classes of animation. one is for infinite rotation "rotator" another one for bounce
CSS
.subcontlooper{
-webkit-animation:rotator 120s infinite;
}
.subcontlooper:hover {
-webkit-animation:bounceIn 2s linear;
}
@-webkit-keyframes rotator{
  from{-webkit-transform:rotate(360deg);}
   to{-webkit-transform:rotate(0deg);}
}
@-webkit-keyframes bounceIn { 
    0% { 
        opacity: 0; 
        -webkit-transform: scale(.9); 
    } 

    50% { 
        opacity: 1; 
        -webkit-transform: scale(1.05); 
    } 

    70% { 
        -webkit-transform: scale(.9); 
    } 

    100% { 
         -webkit-transform: scale(1); 
    } 
} 

it works on hover and normal case

But my problem is, **on hover** second animation not starting from first animated position
also vice versa
How could i do this? i also used
CSS
-webkit-animation-fill-mode: forwards;
but no use
Posted
Updated 22-Jun-15 1:55am
v2
Comments
Sergey Alexandrovich Kryukov 22-Jun-15 9:47am    
Firstly, you only use webkit-specific CSS. It means that on other browsers your transform and animation properties won't work. Secondly, CSS animation cannot do it all in all cases. In more complicated cases, you may need to implement JavaScript animation.
—SA
Akhil Das 23-Jun-15 8:23am    
actually i'm checking this for chrome only.is there any way to get this using jQuery?, i have done some remove add class operations using jquery but no effect.
Sergey Alexandrovich Kryukov 23-Jun-15 8:34am    
Of course, you can use jQuery .animate()...
—SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900