CSS3アニメーションに触れてみる（3） - entacl Lab.
スプライトシートアニメーション マウスオーバーでスプライトシートアニメーション ※画像にマウスオーバーして下さい。 #sprite { cursor: pointer; background: url(/sample/2012/img/sprite.png) no-repeat left top; width: 240px; height: 110px } #sprite:hover { -webkit-animation: sprite-animation 2s steps(32) infinite } @-webkit-keyframes sprite-animation { 0% {background-position: 0px 0} 100% {background-position: -7680px 0} } マウスオーバーするとスプライトシートアニメーションが実行されますね。
Spritely.net – Coding Masters
jQuery.spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It’s a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds. You can use it on any html web page, and any part of the page can interact with a sprite (clic
PNG画像でもコマ送りのアニメーションさせてしまう、ナイスアイデアのスタイルシート -Sprite sheet
デモページ 仕組みは、横に各コマを並べたPNG画像をCSSスプライトで順に表示させて、コマ送りのアニメーションのようにしています。 「show sprite」をチェックするとその仕組みがよくわかります。 「animation-duration」の数字を変更すると、アニメーションの速度が変わります。 デモページ：スプライトを表示 スタイルシートはコマ送りのステップを定義し、背景にしたPNG画像を少しずつずらして表示します。 デモは1秒間に10ステップ、500pxの画像を50pxずつ動かしています。 CSS div { animation: play 1s steps(10) infinite; } @keyframes play { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } }
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
