0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

DOMに動きをつける Animation (JavaScript, CSS)

Last updated at Posted at 2022-08-04

JavaScript の Animations API, CSS の animation を使って簡単に画面の要素(DOM)に動きをつけることができる
キーフレームで変化させるスタイルを指定してタイミングプロパティで変化の間隔や回数が指定できる
使い方を簡単に記載、細かい設定はまだまだある...

DOM に動きをつける設定方法 animate(キーフレーム, タイミングプロパティ)

let dom = document.getElementById('id');

dom.animate(
    // キーフレーム ⇒ スタイル名: [値1, 値2...]  # 値1~2~...と徐々に変化
    {
        backgroundColor: ['red', 'blue', 'red']
        , fontSize: ['10px', '25px']
        , transform: ['rotate(0deg)', 'rotate(360deg)']
        , width: ['10%', '50%', '100%', '50%', '10%']
    }
    // タイミングプロパティ ⇒ タイミング名: 値
    , {
        duration: 3000  // 変化の間隔(ms)
        , iterations: Infinity // 繰り返し回数, Infinity は無限
    }
);

CSS て設定する animation, @keyframes

/* @keyframes 名前を設定, 0%, 50%, 100%.. などパーセントで変化中のCSSを設定 */
@keyframes keyframename {
    0% {
        background-color: red;
        font-size: 10px;
        transform: rotate(0deg);
    }
    50% {
        background-color: blue;
    }
    100% {
        background-color: red;
        font-size: 25px;
        transform: rotate(360deg);
    }
}
/* animation "-" でプロパティを指定して値を設定 */
.classname {
    animation-name:keyframename;  /* @keyframes で設定した名前に合わせる */
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?