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} } マウスオーバーするとスプライトシートアニメーションが実行されますね。
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
animation－CSS3リファレンス
animationプロパティは、要素にキーフレームアニメーションを適用する場合に、 アニメーションについてまとめて指定する際に使用します。 animationプロパティでは、 animation-name、 animation-duration、 animation-timing-function、 animation-delay、 animation-iteration-count、 animation-direction の6つのプロパティの値を、組み合わせて指定することができます。 省略された値はそれらの初期の値に設定されます。 ■値 各プロパティの値をスペースで区切って指定 animation-nameの値、 animation-durationの値、 animation-timing-functionの値、 animation-delayの値、 animation-iterati
HTML5 × CSS3 × jQueryを真面目に勉強 – #9.1 CSS3アニメーション（Animation） | DevelopersIO
animation-nameは、実際にどのような動きをするかを定義した@keyframesを指定し、唯一の必須項目です。 記述例) animation /* * @animation-name * @animation-duration * @animation-timing-function * @animation-delay * @animation-iteration-count * @animation-direction * @animation-fill-mode */ animation: myAnimarion 1s ease 0s 1 normal none; animation-name以外のプロパティは全てオプション扱いとなり、省略した場合は記述例にある値が初期値として指定されます。 @keyframes @keyframesは、要素に対してどのようなアニメーション
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
