背景画像に対してアニメーションを適用させる方法

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <link rel="stylesheet" type="text/css" href="xxxx.css">
6    </head>
7    <body>
8        <div id="image"></div>
9    </body>
10</html>

css
1#image{
2    background-image: url(aaa.jpg);
3    background-repeat: no-repeat;
4    width: 100px;
5    height: 100px;
6}

javascript
1window.addEventListener('DOMContentLoaded', ()=>{
2    const image = document.getElementById('image');//回転させる要素を取得
3
4    image.animate( // 以下アニメーション
5      [
6        { transform: 'rotate(0deg)' },
7        { transform: 'rotate(360deg)' } 
8      ], 
9      {
10        fill: 'backwards',
11        duration: 9000,
12        iterations: Infinity,  
13      },
14    );

これで要素自体は回転アニメーションをさせられるのですが、要素の背景のみを回転させようとして、

javascript
1const image = document.getElementById('image').style.backgroundImage; //回転させる要素を取得

js2行目を上記に変更して回転対象を背景画像に絞ろうとしたのですが、空文字列を取得したようで動作しませんでした。
background-imageのみにアニメーションをかけたいのですが背景画像そのものを取得する方法はないでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

background-imageは要素のプロパティなので、要素とは別に回転させることはできません。

方法としては２つ考えられます。
(1) 中の要素を逆回転させて、親の回転を打ち消す。
(2) background-imageは使わずにimg要素をposition: absolute;で親要素の背後に配置する。

(1)

html
1<div id="image">
2  <p id="p">テキスト</p>
3</div>

css
1#image {
2  width: 100px;
3  height: 100px;
4  background-image: url(https://picsum.photos/100/100);
5  background-repeat: no-repeat;
6}
7#p {  
8  color: red;
9  text-align: center;
10  line-height: 100px;
11}

js
1window.addEventListener('DOMContentLoaded', () => {
2    const image = document.getElementById('image');//回転させる要素を取得
3    const p = document.getElementById('p');
4
5    image.animate( // 以下アニメーション
6        [
7            { transform: 'rotate(0deg)' },
8            { transform: 'rotate(360deg)' }
9        ],
10        {
11            fill: 'backwards',
12            duration: 9000,
13            iterations: Infinity,
14        },
15    );
16    p.animate( // 以下アニメーション
17        [
18            { transform: 'rotate(360deg)' },
19            { transform: 'rotate(0deg)' }
20        ],
21        {
22            fill: 'backwards',
23            duration: 9000,
24            iterations: Infinity,
25        },
26    );
27});

(2)

html
1<div id="image">
2  <img src="https://picsum.photos/100/100"></img>
3  <p id="p">テキスト</p>
4</div>

css
1#image {
2  width: 100px;
3  height: 100px;
4  position: relative;
5}
6#image img {
7  position: absolute;
8  width: 100%;
9  height: 100%;
10  z-index: -1;
11}
12#p {
13  height: 100%;
14  color: red;
15  text-align: center;
16  line-height: 100px;
17}

js
1window.addEventListener('DOMContentLoaded', () => {
2    const image = document.querySelector("#image img");//回転させる要素を取得
3
4    image.animate( // 以下アニメーション
5        [
6            { transform: 'rotate(0deg)' },
7            { transform: 'rotate(360deg)' }
8        ],
9        {
10            fill: 'backwards',
11            duration: 9000,
12            iterations: Infinity,
13        },
14    );
15});