【CSS】linear-gradientの角度をアニメ変化させてみます【実験】
どうも！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 の指定はアニメ変化してくれる事から、「角度がアニメ変化している」ように見せかける方法を思いついたので試してみました！
実験
linear-gradientの角度をアニメーション変化
コード
<style>
@keyframes gradienttesta{
0%,50%,100%{background-size:100% 100%;}
25%{background-size:1000% 100%;}
75%{background-size:100% 1000%;}
}
.gradienttest{
width:280px;
height:280px;
border:1px solid black;
background-image:linear-gradient(to left top,#ffcccc 50%,#ccffcc 51%);
animation:gradienttesta 20s linear infinite;
}
</style>
<div class="gradienttest">linear-gradientの角度をアニメーション変化</div>
肝要なのは「角度を指定しない事」
linear-gradient の、角度を入れる部分に「to left top」を指定しました。
これは、角度に囚われずに「対角線」をとってくれる便利な指定で、要素サイズが不確定な場合などに「角から角に線を引く」ような用途に便利に使う事ができます。
この性質を利用して、「仮想的な背景画像のサイズをkeyframesで変更した」場合に、常にlinear-gradientが「対角線をとろうとする」ために、角度が徐々に変わっているような変化を実現できるんですね^^
ただし、この方法では最大でも「限りなく90度に近い範囲以内」という制約がつきますが…。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
