CSS Multiple Animations on single element, no javascript

Question

I am trying to create an image slideshow using only CSS and no Javascript.

I have an ALMOST working example here: http://codepen.io/k/pen/Dkhei . The problem is that the animation for the 'Previous' functionality won't pause when I stop hovering over its element.

I am defining two animations on a single element, whose class name is 'imageContainer'. I am curious to know whether my syntax is wrong or if what I am trying to do is not possible.

HTML:

<div class='carouselContainer'>
<div class='directionSelector previous'>Previous</div>
<div class='directionSelector next'>Next</div>
<div class='imagesContainer'>
  <img class='visible' src='http://ibmsmartercommerce.sourceforge.net/wp-content/uploads/2012/09/Roses_Bunch_Of_Flowers.jpeg'/>
  <img class='hidden' src='http://houseoflowers.com/wp-content/uploads/2013/03/Splendid-flowers-wallpaper-wallpapers-1920x1200-mrwallpaper-com.jpg'/>
  <img class='hidden test' src='http://wallzpoint.com/wp-content/gallery/flower-4/flower-flowers-31723005-1600-1200.jpg'/>
  <img class='hidden' src='http://images2.layoutsparks.com/1/179204/no-idea-t5-flowers.jpg'/>
  <img class='hidden' src='http://3.bp.blogspot.com/-Ca_H0XQYQI4/UQFMSauQxTI/AAAAAAAABik/WHzskd_HqqU/s1600/flowers.jpg'/>
</div>
</div>

CSS:

.carouselContainer{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 1px solid grey;
  width: 450px;
  height: 300px; 
  position: relative;
  background-color: grey;
  margin: auto;
  overflow: hidden;
}

.directionSelector{
  width: 60px;
  height: 1.5em;
  line-height: 1.5em;
  top: 150px !important;
  position: absolute;
  cursor: pointer;
  background-color: rgba(1,1,1,.7);
  color: white;
  text-align: center;
  border-radius: 5px;
}
.previous{
  top: 0;
  left: 5px;
}
.next{
  top: 0;
  right: 5px;
}
img{
  width: 100%;
  height: 300px;
  float: left;
}
.imagesContainer{
  width: 100%;
  background-color: yellow;
  -webkit-animation-name: showImagesPrev,showImagesNext;
  -webkit-animation-duration: 5s,5s;
  -webkit-animation-play-state: paused,paused;
  -webkit-animation-fill-mode: forwards,forwards;

  -moz-animation-name: showImagesPrev,showImagesNext;
  -moz-animation-duration: 5s,5s;
  -moz-animation-play-state: paused,paused;
  -moz-animation-fill-mode: forwards,backwards;

  animation-name: showImagesPrev,showImagesNext;
  animation-duration: 5s,5s;
  animation-play-state: paused,paused;
  animation-fill-mode: forwards,backwards;

}
.previous:hover ~ div.imagesContainer{
  -webkit-animation-name: showImagesPrev;
  -webkit-animation-play-state: running; 

  -moz-animation-name: showImagesPrev;
  -moz-animation-play-state: running; 

  animation-name: showImagesPrev;
  animation-play-state: running; 
}
.next:hover ~ div.imagesContainer{
  -webkit-animation-name: showImagesNext;
  -webkit-animation-play-state: running;

  -moz-animation-name: showImagesNext;
  -moz-animation-play-state: running;

  animation-name: showImagesNext;
  animation-play-state: running;
}
@-webkit-keyframes showImagesPrev{
  from{
    margin-top: 0px;
  }
  to{
    margin-top: -1200px;
  }
}
@-moz-keyframes showImagesPrev{
  from{
    margin-top: 0px;
  }
  to{
    margin-top: -1200px;
  }
}
@keyframes showImagesPrev{
  from{
    margin-top: 0px;
  }
  to{
    margin-top: -1200px;
  }
}
@-webkit-keyframes showImagesNext{
  from{
    margin-top: -1200px;
  }
  to{
    margin-top: 0px;
  }
}
@-moz-keyframes showImagesNext{
  from{
    margin-top: -1200px;
  }
  to{
    margin-top: 0px;
  }
}
@keyframes showImagesNext{
  from{
    margin-top: -1200px;
  }
  to{
    margin-top: 0px;
  }
}

Thank you for your help :)

This doesn't appear to be the cause of the problem, but there may be a typo with the animation-fill-mode. One of them is forwards,forwards and the other two are forwards,backwards. — Matt Coughlin
– Matt Coughlin, Commented Apr 4, 2013 at 21:05
I think this may only be doable if it's possible to reverse the direction of a single animation at any point. I experimented with using a single animation and toggling animation-direction between normal and reverse (for next and previous), but that didn't seem to work. — Matt Coughlin
– Matt Coughlin, Commented Apr 4, 2013 at 21:40
@Matt, had the same thought and tried to get it to work too... no luck either. But I think it's the right way. — Linus Caldwell
– Linus Caldwell, Commented Apr 4, 2013 at 21:48
The problem arises when at the exit of the hover there is a change in the animation, in anything that is not the play state. I have also tried changing direction, as @MattCoughlin. It has the same problem. But, you can make the previous work changing the animation when not hovered to match(in both approaches). Only that then the next will stop working :-) — vals
– vals, Commented Apr 4, 2013 at 21:56
can use :active instead of hover? then you can animated by image like a slideshow. — Jesse
– Jesse, Commented Apr 5, 2013 at 0:03

Nobal Mohan · Accepted Answer · 2016-11-23 12:29:06Z

10

As per W3C animation-name property Link

If multiple animations are attempting to modify the same property, then the animation closest to the end of the list of names wins.

In your example showImagesPrev is referred first and showImagesNext was the last one, so it worked correctly as per W3C. If you interchange these two reference, Previous will work fine, while Next button reproduce the issue. A working Example

edited Nov 23, 2016 at 12:29

answered May 15, 2013 at 8:50

Nobal Mohan

4867 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Luca Over a year ago

the same problem haunted me 2 years ago. Glad to find the answer now!

Collectives™ on Stack Overflow

CSS Multiple Animations on single element, no javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related