【javascript】CSSのアニメーション@keyframesをjavascriptで制御する setProperty

CSSだけのアニメーション
.box{
width: 10px;
height: 30px;
background: black;
animation: progress 3s ease infinite;
}
@keyframes progress {
100%{
width: 100%;
height:100px;
background: red;
}
}
参考


CSSのカスタムプロパティ
- :root{}で初期値を設定
- --名で変数を指定
- var(--名)と記述し、ここに値を代入する。
:root { /* 初期値 */
--width: 100%;
--height: 30px;
--background: black;
}
.box{
width: 10px;
height: 30px;
background: black;
margin: 50px 0;
animation: progress 3s ease infinite;
}
@keyframes progress {
100%{
width: var(--width);
height: var(--height);
background: var(--background);
}
}
javascriptでCSSで指定した変数を制御する
セレクトボックスを選択しても変化がない場合は右をクリック!
以下の下線部を書き換えます。

HTML
<div class="wrapper">
<div class="box"></div> <!-- アニメーションする要素 -->
</div>
<!-- onchangeでセレクトボックスに変更があったら、値を取得し処理 -->
<select name="--width" id="--width" onchange="selected(this.id, this.value)">
<option value="100%" selected>width: 100%</option>
<option value="50%">width: 50%</option>
<option value="30%">width: 30%</option>
</select>
<select name="--height" id="--height" onchange="selected(this.id, this.value)">
<option value="30px" selected>height: 30px</option>
<option value="50px">height: 50px</option>
<option value="100px">height: 100px</option>
</select>
<select name="--background" id="--background" onchange="selected(this.id, this.value)">
<option value="black" selected>background: black</option>
<option value="red">background: red</option>
<option value="blue">background: blue</option>
</select>
参考

javascript
- setProperty(第一引数 ,第二引数 )
- 第一引数は、CSSカスタムプロパティ(--名)
- 第二引数は、変数の値
function selected(id, value){
// selectボックスの値を取得し、setPropertyに代入
document.documentElement.style.setProperty(id, value);
}
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク