CODEWITHSUNDEEP
htmlcssanimation
Johnny
Johnny

Reputation: 125

How can I pause CSS animation on hover only between cycles?

I'm creating a CSS only slider with text content.

It's based on https://codepen.io/cassidoo/pen/MyaWzp

html,
body {
  font-family: 'Droid Serif', serif;
}

h1 {
  font-size: 60px;
  text-align: center;
}

.content-slider {
  width: 100%;
  height: 360px;
}

.slider {
  height: 320px;
  width: 680px;
  margin: 40px auto 0;
  overflow: visible;
  position: relative;
}

.mask {
  overflow: hidden;
  height: 320px;
}

.slider ul {
  margin: 0;
  padding: 0;
  position: relative;
}

.slider li {
  width: 680px;
  height: 320px;
  position: absolute;
  top: -325px;
  list-style: none;
}

.slider .quote {
  font-size: 40px;
  font-style: italic;
}

.slider .source {
  font-size: 20px;
  text-align: right;
}

.slider li.anim1 {
  animation: cycle 15s linear infinite;
}

.slider li.anim2 {
  animation: cycle2 15s linear infinite;
}

.slider li.anim3 {
  animation: cycle3 15s linear infinite;
}

.slider li.anim4 {
  animation: cycle4 15s linear infinite;
}

.slider li.anim5 {
  animation: cycle5 15s linear infinite;
}

.slider:hover li {
  animation-play-state: paused;
}

@keyframes cycle {
  0% {
    top: 0px;
  }
  4% {
    top: 0px;
  }
  16% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  20% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  50% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  92% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
  96% {
    top: -325px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}

@keyframes cycle2 {
  0% {
    top: -325px;
    opacity: 0;
  }
  16% {
    top: -325px;
    opacity: 0;
  }
  20% {
    top: 0px;
    opacity: 1;
  }
  24% {
    top: 0px;
    opacity: 1;
  }
  36% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  40% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle3 {
  0% {
    top: -325px;
    opacity: 0;
  }
  36% {
    top: -325px;
    opacity: 0;
  }
  40% {
    top: 0px;
    opacity: 1;
  }
  44% {
    top: 0px;
    opacity: 1;
  }
  56% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  60% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  61% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle4 {
  0% {
    top: -325px;
    opacity: 0;
  }
  56% {
    top: -325px;
    opacity: 0;
  }
  60% {
    top: 0px;
    opacity: 1;
  }
  64% {
    top: 0px;
    opacity: 1;
  }
  76% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  80% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  81% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle5 {
  0% {
    top: -325px;
    opacity: 0;
  }
  76% {
    top: -325px;
    opacity: 0;
  }
  80% {
    top: 0px;
    opacity: 1;
  }
  84% {
    top: 0px;
    opacity: 1;
  }
  96% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
}
<h1>Pure CSS3 Text Carousel</h1>

<div class="content-slider">
  <div class="slider">
    <div class="mask">
      <ul>
        <li class="anim1">
          <div class="quote">Hello, this is a quote from a person.</div>
          <div class="source">- Person</div>
        </li>
        <li class="anim2">
          <div class="quote">Hello, this is a quote from another person.</div>
          <div class="source">- Another person</div>
        </li>
        <li class="anim3">
          <div class="quote">Hello, this is a quote from an animal.</div>
          <div class="source">- Animal</div>
        </li>
        <li class="anim4">
          <div class="quote">Hello, this is a quote from a plant.</div>
          <div class="source">- Plant</div>
        </li>
        <li class="anim5">
          <div class="quote">How do ya like that.</div>
          <div class="source">- Cassidy</div>
        </li>
      </ul>
    </div>
  </div>
</div>

Everything works fine, but the pause on hover function pauses the animation in the current position, which can be in the middle of a cycle. This is the correct en obvious behavior, but not ideal for my slider. The image below shows a cycle paused at about 50%:

This image shows a CSS cycle paused at about 50%

Is there some way to get the active cycle to finish before pausing? If not, would there be some trick to disable pointer-events during cycles?

UPDATE: I have it working now in Chrome and Firefox, but Safari does not seem to accept pointer-events in keyframes.

I added a background to confirm the timing for the idle instances. I actually added an extra keyframe for this on the .slider div and added step-start to remove the transition. This animation also pauses on hover, of course, otherwise the animations would run asynchronously after hovering the slider. https://jsfiddle.net/8f1senmt/

Anyone know why Safari does not play along? Would it just be a restriction or is another setting messing this up?

Upvotes: 0

Views: 843

Answers (1)

Puschi
Puschi

Reputation: 249

I played a bit with your code, if you add these lines it will work. I added pointer-events: none to the slider. Only in specific frames it will be set to auto.

I gave background-color to the slider in the frames where you can hover and only then it will stop. The only problem is :hover will only be recognised, if you move with your mouse. So if the mouse is in the slider, but not moving it won't work.

You will also need to adjust the time-frames, because the background-color is not on the right frame.

.slider {
  height: 320px;
  width: 680px;
  margin: 40px auto 0;
  overflow: visible;
  position: relative;
  pointer-events: none;
  animation: slidercycle 15s linear infinite;
}
.slider:hover{
  animation-play-state: paused;
}

@keyframes slidercycle {
  0% {
    pointer-events: none;
  }
  19% {
    pointer-events: auto;
    background-color: transparent;
  }
  20% {
    pointer-events: auto;
    background-color: red;
  }
  21% {
    pointer-events: none;
    background-color: transparent;
  }
  39%{
    pointer-events: none;
    background-color: transparent;
  }
  40% {
    pointer-events: auto;
    background-color: blue;
  }
  41% {
    pointer-events: none;
    background-color: transparent;
  }
  59%{
    pointer-events: none;
    background-color: transparent;
  }
  60% {
    pointer-events: auto;
    background-color: green;
  }
  61% {
    pointer-events: none;
    background-color: transparent;
  }
  79%{
    pointer-events: none;
    background-color: transparent;
  }
  80% {
    pointer-events: auto;
    background-color: yellow;
  }
  81% {
    pointer-events: none;
    background-color: transparent;
  }
  100%{
    pointer-events: none;
    background-color: transparent;
  }
}

Im not sure about this, but I think you could also use only one cicle for each list element and work with animation-delay.

Upvotes: 1

Related Questions