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
Post a Comment