CSSで@keyframesでアニメーションしてみる

CSSで@keyframesでアニメーションしてみる

@keyframesっていうのを使うとアニメーションができてデザイナブルなページが作成できたりします。

ここを参考にしました。

squareを指定するとその意味の通り平方(四角)に動かすことができます。

上記のように0%と100%のみ指定した場合は上から下、下から上、左から右、右から左みたいに動かすことができます。

translateYにしているので上下のアニメーションになります。

htmlのbody部は以下のような感じです。

これでliタグが上から下に10秒かけて移動します。

デモ

infiniteは無限

infiniteを指定すると無限にアニメーションします。英語通りです。

translateX

translateXにしてみると今度は左右でアニメーションします。

上記のCSSのtranslateYをtranslateXに変えただけです。

デモ

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA