0
Help us understand the problem. What are the problem?

posted at

updated at

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

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% {
        backgroundColor: red;
        fontSize: 10px;
        transform: rotate(0deg);
    }
    50% {
        backgroundColor: blue;
    }
    100% {
        backgroundColor: red;
        fontSize: 25px;
        transform: rotate(360deg);
    }
}
/*  animation "-" でプロパティ制定して値を設定 */
#id {
    animation-name:keyframename;
    animation-duration: 3000;
    animation-iteration-count: infinity;
}

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?