【CSS】linear-gradientの角度をアニメ変化させてみます【実験】 - Little Strange Software

どうも！LSSです！！ CSSのbackground-imageにlinear-gradientを指定し、それをkeyframesアニメーションの対象にした場合。 例えば、 @keyframes キーフレーム名{ 0%{background-image:linear-gradient(0deg , 色１ , 色２);} 100%{background-image:linear-gradient(90deg , 色１ , 色２); } のように指定したとしても、角度が「0degから90degに徐々に変化」…とはなりません。 他のgradientもそうですが、 ( ) の内容はkeyframesの「徐々に変化」の途中経過の補完対象外のようです。 ですが、background-position や background-size の指定はアニメ変化してくれる事から、「角度がアニメ変化している」よ

[kefugahi]

なんか面白いですね！真四角だとかさばる感じがするし、線に近い形だと効果的に使えるかもしれません。

[kaiyumaru]

何時も訪問有難うございます感謝申し上げます

[conasaji]

色を片方背景色にしたら三角が伸び縮みするアニメーションになりますね。グラフ変化とか？伸び率のイメージとか？w

[newgenworld]

おはようございます🌞起きたばかりなのに寝落ちしそう😴

[hukunekox]

角度を確定しないことで動きが出るんですね😲✨