CODEWITHSUNDEEP
javascriptcssreactjsanimationjsx
Ethanolle
Ethanolle

Reputation: 1223

CSS Animation, onAnimationEnd Running only once

Hy stack, I'm trying to make an animation when a button is clicked. With React and CSS. and the problem is that the onAnimationEnd Running only once.

I tried to do some change on the CSS but I'm not sure that the problem is in the CSS but I don't find any good documentation.

@keyframes example {
  from {
    opacity: 100%;
  }
  to {
    opacity: 10%;
    left: 15%;
  }
}

.products {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 15%;
  z-index: 3;
}

.slide-animation {
  animation: example 0.5s;
}
function App() {
  const [transition, setTransition] = useState(false)
  console.log(transition)

  return (
<div className='generalContainer'>
      <img
        src='images/products/Zero.png'
        alt='cocacola'
        onAnimationEnd={() => setTransition({ transition: false })}
        className={transition ? "products slide-animation " : "products"}
      />
      <div className='square center-page '>
        <h2
          className='next-button'
          onClick={() => setTransition({ transition: true })}
        >
          Next
        </h2>
      </div>
    </div>
    )
   }

Upvotes: 0

Views: 789

Answers (1)

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8098

animation-iteration-count should be set to infinite to achieve animations non-stop in CSS. Try to add this CSS.

.slide-animation {
  animation: example 0.5s infinite;
}

Upvotes: 2

Related Questions