hover 時にスプライト画像を CSS だけでフェードイン／アウトさせる方法

課題

• ロード時にもアニメーションしてしまう。 とりあえず解決。代わりに以下の問題が発生。
• ロード時にアニメーションして見えるのを防ぐために、ロード時の初回アニメーション中は要素が非表示になる。

更新履歴

• クロスフェードに対応。ついでに記述を整理。（2016/8/1）

CSS の場合

div {
  position: relative;
  animation: delayView 0.2s linear;
}
div,
div::before,
div::after {
  width: 100px;
  height: 100px;
  background: url("../images/img.png") no-repeat;
}
div,
div:hover::before {
  background-position: 0px 0px;
}
div::before,
div::after {
  content: '';
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
div::after {
  background-position: 0px -100px;
  animation: fadeOut 0.2s linear;
}
div:hover {
  background: none;
}
div:hover::before {
  opacity: 0;
  animation: fadeOut 0.2s linear;
}
div:hover::after {
  opacity: 1;
  animation: fadeIn 0.2s linear;
}

@keyframes delayView {
  0% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

stylus + sprite の場合

sprite-animate-hover(image, duration = .2, suffix = { before: '-off', after: '-on' })
  position relative
  animation delayView (duration)s linear
  &::before, &::after
    content ''
    display block
    opacity 0
    absolute top 0 left 0
  &, &::before
    sprite(image + suffix.before + '.png')
  &::after
    sprite(image + suffix.after + '.png')
    animation fadeOut (duration)s linear
  &:hover
    background none
    &::before
      opacity 0
      animation fadeOut (duration)s linear
    &::after
      opacity 1
      animation fadeIn (duration)s linear

@keyframes delayView
  0%
    opacity 0
  99%
    opacity 0
  100%
    opacity 1

@keyframes fadeIn
  0%
    opacity 0
  100%
    opacity 1

@keyframes fadeOut
  0%
    opacity 1
  100%
    opacity 0

sprite mixins はファイル名で呼び出すやつ。
僕は gulp-stylus-sprites 使ってる。