Skip to main content
Participant
April 3, 2025
Answered

XD 1つの要素に2つのアニメーション

  • April 3, 2025
  • 1 reply
  • 106 views

現在ウェブデザインの勉強中でして、スマートフォン用のデザインを作成しています。

アコーディオンメニューを設定したのですが、タップすると色が変わるようにしたいです。

ただ自動アニメーションでアコーディオンメニューを設定してから、トグルステートで色を変えると自動アニメーションが消えてしまします。

1つの要素に対して2つのアニメーションをつけることはできないのでしょうか?

もし手順があれば、教えていただきたいです。

よろしくお願いいたします。

Correct answer tantan0000

こんにちは!
一つの要素にふたつつけられないということはないのですが、色やドロップシャドウが自動アニメーションできません

たとえば、線幅・角丸・透明度であればみっつ同時でも自動アニメーションできます。

色を変えたい場合は、元の色のオブジェクトと後の色のオブジェクトを二つ重ねておいて、元のオフジェクトの透明度を0にすることで後の色に徐々に変わったように見せることができます。
ちょっと面倒ですが、私はそうやっています。よかったら試してみてください。

アイデアだけ手短にご紹介しましたが、詳しいやり方がわからなければ、またご相談ください。

1 reply

tantan0000
Community Expert
tantan0000Community ExpertCorrect answer
Community Expert
April 3, 2025

こんにちは!
一つの要素にふたつつけられないということはないのですが、色やドロップシャドウが自動アニメーションできません

たとえば、線幅・角丸・透明度であればみっつ同時でも自動アニメーションできます。

色を変えたい場合は、元の色のオブジェクトと後の色のオブジェクトを二つ重ねておいて、元のオフジェクトの透明度を0にすることで後の色に徐々に変わったように見せることができます。
ちょっと面倒ですが、私はそうやっています。よかったら試してみてください。

アイデアだけ手短にご紹介しましたが、詳しいやり方がわからなければ、またご相談ください。