[CSS]この発想はすごい！画像をモザイクからくっきり見せるスタイルシートのテクニック

サイト構築 -CSS

Post on:2014年6月20日

sponsors

Photoshopの「生成塗りつぶし」を文字の加工に活用しよう！ 2024年4月26日金曜日 20時から21時30分

一枚の画像を使って、モザイク状の画像をアニメーションで少しずつくっきりさせるスタイルシートのテクニックを紹介します。
もうほんと、ナイスアイデア！　コードを見る前に実装方法をちょっと考えてみてください。

↓はブラウザでの表示をアニメーションgifにしたものです。

実際の動作は、Chrome, Safari, Firefox, IE11でお楽しみください。

Gif Style CSS3 Animation

アニメーションはロード時のみなので、繰り返し見たい時はリロードで。

実装はこんな感じです。

HTML

HTMLは非常にシンプル！
画像はdivの背景として表示します。

<body>
  <div class="image"></div>
</body>

CSS

スタイルシートも非常にシンプル、一枚の画像にモザイクからくっきりまでの各コマを並べ、CSSスプライトで次々にアニメーションで表示しています。
コードを見るまで、どうやって実装してるのか全く分かりませんでした。

body {
  background: Teal;
}

.image{
  width: 310px;
  height: 300px;
  background: url(http://jaschagoltermann.de/wp-content/themes/jg/assets/img/profile_build_jg.png);
  background-position: -4960px;
  position: absolute; 
  margin: auto; 
  top: 0; left: 0; bottom: 0; right: 0;
  
  /* 
  shorthand would be 
  -webkit-animation: gif 1s steps(17,start) 1.5s 1 forwards; 
  but that does not work with safari. safari
  */
  
  -webkit-animation-name: gif;
  -webkit-animation-delay: 1s;
  -webkit-animation-timing-function: steps(17,start);
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;

  -moz-animation: gif 1s steps(17,start) 1.5s 1 forwards;
  -ms-animation: gif 1s steps(17,start) 1.5s 1 forwards;
  -o-animation: gif 1s steps(17,start) 1.5s 1 forwards;
  animation: gif 1s steps(17,start) 1.5s 1 forwards;
}
  
  @-webkit-keyframes gif{
  0% {background-position: -5270px}
  100% {background-position: 0}
  }

  @-moz-keyframes gif{
  from{background-position: -5270px}
  to{background-position: 0}
  }

  @-ms-keyframes gif{
  from{background-position: -5270px}
  to{background-position: 0}
  }

  @-o-keyframes gif{
  from{background-position: -5270px}
  to{background-position: 0}
  }

  @keyframes gif{
  from{background-position: -5270px}
  to{background-position: 0}
  }