CODEWITHSUNDEEP
cssanimationhover
oboer
oboer

Reputation: 159

CSS - stopping animation with :hover (no JS)

Is there any way of stopping animation with :hover and make it run again once hovered off?

This part is solved:

I thought of doing it with animation-state-paused, but as the animation runs on multiple elements with precised animation-delay, such solution desynchronizes elements.

What I would like to achieve 'at least' is to stop all of the animation once hovered.

Still looking for solution for this part:

And the Great Achievement would be (additionaly) to change z-index so the hovered picture goes in front of all the other ones... and come backs to its z-index from animation once hovered off + animation continues the cycle.

Important thing - NO JAVASCRIPT (I'd really like to use it, but I cannot because of some CMS settings).

Code without hover: CODEPEN and SOSnippet:

.cube2>div{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  width:450px;
}

.playground2 {
  overflow: hidden;
}

.frame {
  position: absolute;
  top:-12px;
  left:-1px;
  z-index: 1;}

.one, .two, .three, .four, .five, .six, .seven, .eight{
  animation: comedown 32s infinite ease-in-out
}

.eight {
  animation-delay: 0s
}

.seven {
  animation-delay: 4s
}

.six {
  animation-delay: 8s
}

.five {
  animation-delay: 12s
}

.four {
  animation-delay: 16s
}

.three {
  animation-delay: 20s
}

.two {
  animation-delay: 24s
}

.one {
  animation-delay: 28s;
}

.container {
  background: darkkhaki;
  height: 400px;
  position: relative;
}

.cube2 {
  top: 100px;
  height: 300px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

@-webkit-keyframes comedown {
  0% {
    top: 0%;
    z-index: 1;
  }
  12.5% {
    top: 120%;
    z-index: 2;
    left:50%;
    transform:translateX(-50%);
  }
  13%{z-index:-15}
  25%{
    top:-50px;
    transform: translateX(-32%)
  }
  35%{z-index:-10}
  37.5%{
    top:-42px;
    transform: translateX(-35%);
  }
  50%{
    top:-36px;
    transform: translateX(-38%);
    z-index:-6;
  }
  62.5%{
    top:-28px;
    transform: translateX(-41%);
    z-index:-5;
  }
  75%{
    top:-20px;
    transform: translateX(-44%);
    z-index:-4;
  }
  87.5%{
    top:-12px;
    transform: translateX(-47%);
    z-index:-3;
  }
  100%{
    top:0px;
    left:50%;
    transform:translateX(-50%);
    z-index:-2;
  }

}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="playground2 container">
  <div class="cube2">
    <div class="one">
    <img class="face" src="https://s17.postimg.org/71iegzebj/img_little.png">
    <img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
    </div>
    <div class="two">
    <img class="face" src="https://s17.postimg.org/duncqzuin/img_little3.png">
    <img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
    </div>
<div class="three">
    <img class="face" src="https://s17.postimg.org/o3b8j2t6n/img_little2.png">
    <img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
    </div>
    <div class="four">
    <img class="face" src="https://s17.postimg.org/v97kz9rnj/img_little4.png">
    <img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
    </div>
<div class="five">
    <img class="face" src="https://s16.postimg.org/4reke4owl/image.png">
    <img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
    </div>
<div class="six">
    <img class="face" src="https://s16.postimg.org/3qebp07x1/image.png">
    <img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
    </div>
<div class="seven">
    <img class="face" src="https://s16.postimg.org/fgs96e0ph/image.png">
    <img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
    </div>
<div class="eight">
    <img class="face" src="https://s16.postimg.org/xxmnx7gnp/image.png">
    <img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
    </div>
  </div>
</div>

Upvotes: 0

Views: 77

Answers (2)

Hasan Shahriar
Hasan Shahriar

Reputation: 478

The trick is to catch :hover on .cube2. This will pause the animation:

.cube2:hover > div{
    -webkit-animation-play-state: paused;   /* Safari 4.0 - 8.0 */
    animation-play-state: paused;
}

To bring image box to front using z-index, use this:

.cube2 > div:hover{
  z-index: 99 !important;
}

Upvotes: 2

Wojtek
Wojtek

Reputation: 101

.cube2:hover > div.one, .cube2:hover >.two, .cube2:hover >.three, .cube2:hover >.four, .cube2:hover >.five,.cube2:hover > .six, .cube2:hover >.seven, .cube2:hover >.eight{
      animation-play-state: paused;
    }

This way all animation is stopped since you call hover on .cube2 See:

https://jsfiddle.net/duuhr712/

Upvotes: 1

Related Questions