CODEWITHSUNDEEP
htmlcss
Sarvesh
Sarvesh

Reputation: 13

how to stop autoscroll animation when hover in css?

I am a beginner and first time using animation and transformation. I am trying to stop the animation when I hover on "some text here" but I am not getting proper output maybe because of inaccurate or wrong placement of &:hover please help to resolve this problem.

#contentwrapper {
  height: 190px;
  background-color: tomato;
  overflow-y: hidden;
}

#inner-wrapper {
  animation: autoscroll 10s linear infinite;
}

@keyframes autoscroll {
  &:hover {
    animation-play-state: paused;
  }
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -90%, 0);
  }
}
<div id="contentwrapper">
  <div id="inner-wrapper">
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
  </div>
</div>

Upvotes: 1

Views: 856

Answers (1)

Praneet Dixit
Praneet Dixit

Reputation: 1425

You can use :hover on the element itself:

#contentwrapper {
  height: 190px;
  background-color: tomato;
  overflow-y: hidden;
}
#inner-wrapper {
  animation: autoscroll 10s linear infinite;
}

#inner-wrapper:hover{
    animation-play-state: paused;
}


@keyframes autoscroll {
  from { 
    transform: translate3d(0,0,0);
  }
  to {
    transform: translate3d(0,-90%,0);
  }
}
<div id="contentwrapper">
  <div id="inner-wrapper">
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>
    <div><a href="#">some text here</a></div>

  </div>
</div>

Upvotes: 1

Related Questions