閉じる
カテゴリー

CSSアニメーション例
右から颯爽と登場

※この画像はマッハドッターbraveさんの作品です。

CSSアニメーション例

アニメーション概要

右から一直線に向かってくるアニメーションです。

使っているプロパティはleftのみのシンプルな挙動です。

画像のidはngです。

CSS
@keyframes coming {
  0% {
    left: 1500px;
  }
  70% {
    left: 0px;
  }
}

#ng {
  animation-name: coming;
  animation-duration: 1.2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

HTML/CSS一覧