cssアニメーションでパラパラアニメを作る方法 | パソコン倶楽部りんご

テクノロジーカテゴリーの変更を依頼記事元:

clubringo.com

7 usersがブックマークコメント

記事へのコメント1件

注目コメント
新着コメント

nilab cssアニメーションでパラパラアニメを作る方法 | パソコン倶楽部りんご : 「animationプロパティのanimation-timing-functionの値にsteps()を使う」

2014/01/23 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=http%3A%2F%2Fclubringo.com%2Fcss%25E3%2582%25A2%25E3%2583%258B%25E3%2583%25A1%25E3%2583%25BC%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%25B3%25E3%2581%25A7%25E3%2583%2591%25E3%2583%25A9%25E3%2583%2591%25E3%2583%25A9%25E3%2582%25A2%25E3%2583%258B%25E3%2583%25A1%25E3%2582%2592%25E4%25BD%259C%25E3%2582%258B%25E6%2596%25B9%25E6%25B3%2595%2F" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="http://clubringo.com/css%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A7%E3%83%91%E3%83%A9%E3%83%91%E3%83%A9%E3%82%A2%E3%83%8B%E3%83%A1%E3%82%92%E4%BD%9C%E3%82%8B%E6%96%B9%E6%B3%95/">cssアニメーションでパラパラアニメを作る方法 | パソコン倶楽部りんご</a><a href="https://b.hatena.ne.jp/entry/clubringo.com/css%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A7%E3%83%91%E3%83%A9%E3%83%91%E3%83%A9%E3%82%A2%E3%83%8B%E3%83%A1%E3%82%92%E4%BD%9C%E3%82%8B%E6%96%B9%E6%B3%95/">はてなブックマーク - cssアニメーションでパラパラアニメを作る方法 | パソコン倶楽部りんご</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

cssアニメーションでパラパラアニメを作る方法 | パソコン倶楽部りんご

animationプロパティのanimation-timing-functionの値にsteps()を使うと、簡単にパラパラアニメが作れま... animationプロパティのanimation-timing-functionの値にsteps()を使うと、簡単にパラパラアニメが作れます。こんな感じです。作成の手順は以下の通り。 cssスプライト画像を作る要領で、アニメの一連の動作を分解した絵を描いて一枚の画像に書き出す。横300px縦100pxでこんな絵を描いてみました。横50px縦100pxの5枚のスプライトをを繋げた状態です。クラスparapara要素を作り、この絵を背景にして、横50px縦100px、overflowをhiddenにします。animationを含めてcssの設定はこうなります。（ベンダープレフィックスは省略しています。） .parapara { width:50px; height:100px; margin:1em auto; overflow:hidden; background:url(http://