Simple slideshow for animating with css.

exampleAnimation.scss

.poster-image {
  @include transition(all linear 0.5s);
  position: absolute;
  top: 0;
  width: 100%;

  &.hide-add {
    opacity: 1;
  }
  &.hide-add-active {
    opacity: 0;
  }

  &.hide-remove {
    opacity: 0;
  }
  &.hide-remove-active {
    opacity: 1;
  }
}

Slider.coffee

class window.Slider
  constructor: (selector, @options)->
    @index = 0
    @elements = document.querySelectorAll selector
    @prevIndex = @elements.length - 1

    @setupOptions()

    @changeActive(@index)
    @startInterval()

  setupOptions: ->
    @options.interval ||= 2500
    @options.animationDuration ||= 500
    @options.callback = @options.callback

  nextIndex: ->
    @prevIndex = @index
    next = @index + 1

    if next == @elements.length
      return @index = 0
    else
      return @index = next

  changeActive: (@index)->
    @elements[@index].classList.remove 'hide'
    @elements[@index].classList.add 'hide-remove'
    @elements[@prevIndex].classList.add 'hide-add'

    window.setTimeout(=>
      @elements[@index].classList.add 'hide-remove-active'
      @elements[@prevIndex].classList.add 'hide-add-active'
    , 10)
    window.setTimeout(=>
      @elements[@index].classList.remove 'hide-remove', 'hide-remove-active'
      @elements[@prevIndex].classList.remove 'hide-add', 'hide-add-active'
      @elements[@prevIndex].classList.add 'hide'

      @options.callback(@prevIndex, @index) if @options.callback
    , @options.animationDuration)

  startInterval: ->
    window.setInterval(=>
      @changeActive @nextIndex()
    , @options.interval)