html - Using two animations on one element, CSS -

i have 2 animations: on element load , hover:

div {      animation: slide-up 2s;     -webkit-animation: slide-up 2s;     -moz-animation: slide-up 2s; } div:hover{     animation: rotate 2s;    -webkit-animation: rotate 2s;    -moz-animation: rotate 2s; } 

the slide-up animation runs once element loaded, , rotate runs when element hovered. however, element slides on mouse leave , don't know how prevent this. i'd turn off slide-up animation on hover.

the rotate animation uses transform property, , slide-up changes margins.

reason:

the slide-up animation executes once again when move mouse out of element because of following reasons:

• on load, element has 1 animation (which slide-up). browser executes this.
• on hover, animation property again specifies 1 animation (which rotate). makes browser remove slide-up animation element. removing animation makes browser forget execution state or execution count of it.
• on hover out, default div selector becomes applicable element , browser again removes rotate animation , attaches slide-up animation. since being re-attached, browser thinks must execute again.

solution:

you can make slide-up animation run once making sure animation never removed element when :hover on , animation-iteration-count 1.

in below snippet, you'd note how have retained slide-up animation definition within :hover selector also. makes browser see animation ever present , since animation executed once on load, won't execute again (because of iteration count).

(note: avoid confusions - default value animation-iteration-count 1 had made explicit purpose of explanation. not primary reason step make sure value doesn't mess solution.)

div {    height: 100px;    width: 100px;    border: 1px solid;    animation: slide-up 2s 1;  }  div:hover {    animation: slide-up 2s 1, rotate 2s forwards;  }  @keyframes slide-up {    {      margin-top: 100px;    }    {      margin-top: 0px;    }  }  @keyframes rotate {    {      transform: rotate(0deg);    }    {      transform: rotate(60deg);    }

<div>some div</div>