Combining CSS transition and animations together? -


hello having trouble combining both css transition , animations together. animation working reason when add transition, transition works, cancels out animation. know how combine them?

here css:

.circle-spin {     transition: 1s ease; }  .circle-spin-reverse {     transition: 1s ease; }  .success li:hover .circle-spin-reverse {     animation:spin-reverse 10s linear infinite;     /* above works until add transition below */      transform:scale(1.25); }  .success li:hover .circle-spin {     animation:spin 10s linear infinite;     /* above works until add transition below */      transform:scale(1.25); }  @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } @keyframes spin-reverse { 100% { -webkit-transform: rotate(360deg); transform:rotate(-360deg); } } 

sorry know it's alot of code, thats bare minimum code needed question.

thanks

it’s cause transform

/* in :hover */ transform:scale(1.25); 

overrides transform in animaton

/* in animation */ transform:rotate(360deg); 

you have separate transforms different elements. see my codepen.


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -