CODEWITHSUNDEEP
cssanimationcss-animations
volkovik
volkovik

Reputation: 67

Animation repeats when another animation is defined in hover

I want to make an animation when page loads. Animation that I defined in #logo repeats if one more animations is defined in #logo:hover and I move the mouse from the logo. How to fix it?

Demo

@keyframes pulse_logo {
    5% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    10% {
        opacity: 1;
    }
    14% {
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
}

@keyframes popout {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

#logo {
    transition: 0.3s;
    animation: popout 1s ease;
}

#logo:hover {
    filter: invert(1);
    animation-name: pulse_logo;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

Upvotes: 1

Views: 55

Answers (3)

Devendra Pratap Singh
Devendra Pratap Singh

Reputation: 26

Try to put effects inside of div with different id name.

body {
  background-color: #777;
}

@keyframes pulse_logo {
    5% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    10% {
        opacity: 1;
    }
    14% {
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
}

@keyframes popout {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

#logo {
    font-size: 80px;
    transition: 0.3s;
    animation: popout 1s ease;
}

#logoh:hover {
    filter: invert(1);
    animation-name: pulse_logo;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
<div id="logo">
  <p id="logoh">Text
    <p>
</div>

Upvotes: 1

alotropico
alotropico

Reputation: 1994

The best you can do, I think, is to apply the second animation to an inner element, for example a span, like so:

body {
  background-color: #777;
  font-size: 4rem;
}
@keyframes pulse_logo {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes popout {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

#logo {
  animation: popout 1s ease;
  transition: all .5s;
}

#logo span:hover {
  filter: invert(1);
  animation: pulse_logo 500ms ease infinite;
}
<p id="logo"><span>Text</span><p>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272590

Keep both animations and only adjust animation-play-state

body {
  background-color: #777;
}


#logo {
    font-size: 80px;
    transition: 0.3s;
    animation: 
      popout 1s ease,
      pulse_logo 4s infinite paused;
}

#logo:hover {
    filter: invert(1);
    animation-play-state:running;
}

@keyframes pulse_logo {
    5% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    10% {
        opacity: 1;
    }
    14% {
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
}

@keyframes popout {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}
<p id="logo">Text<p>

Or only change the one you need:

body {
  background-color: #777;
}

#logo {
    font-size: 80px;
    transition: 0.3s;
    animation: 
      popout 1s ease,
      random_name 4s infinite; /* a random name here that you change on hover */
}

#logo:hover {
    filter: invert(1);
    animation: 
      popout 1s ease,
      pulse_logo 4s infinite;
}

@keyframes pulse_logo {
    5% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    10% {
        opacity: 1;
    }
    14% {
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
}

@keyframes popout {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}
<p id="logo">Text<p>

Upvotes: 0

Related Questions