どうも！LSSです！！
CSSのキーフレームアニメーションは、「要素」を滑らかに変化させる事ができます。
※ここでいう「要素」はHTMLを構成する<div>などのタグによる領域を指します。
「要素」の変化の対象となるCSSプロパティはかなり多くのものが対応しています。
例えば「要素」のうちの「背景」についても、background-positionを変化させる事で表示位置を滑らかに移動させたり、background-sizeを変化させる事で大きさを滑らかに変化させる事ができます。
が、このbackground-系のプロパティに「角度」を指定するプロパティが無いんですね。
背景に画像ではなくグラデーションを指定する、 linear-gradient や conic-garadient という関数の中には 表示角度を指定する箇所がありますが、それらはアニメーションの「滑らかな変化」には対応していません。
今回は、その「できないはずの背景回転アニメーションを強引に実現する」方法を思いついたので、試してみました^^
背景回転アニメーション
それとも立体的な折り紙のよう？
コード
<style>
@keyframes bgcnca{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
.bgcnc{
position:relative;
width:300px;
height:200px;
overflow:hidden;
}
.ibgcnc{
position:absolute;
top:-150px;
left:-100px;
width:500px;
height:500px;
background-image:repeating-conic-gradient(#ccffcc,#000000,#ffcccc,#000000,#ccccff,#000000,#ccffcc 120deg);
animation:bgcnca 15s linear 0s infinite;
}
.i2bgcnc{
position:relative;
padding:0.6em;
color:white;
text-shadow:1px 1px 0px black;
}
</style>
<div class="bgcnc">
<div class="ibgcnc"> </div>
<div class="i2bgcnc">ここに文章を書く</div>
</div>
強引に実現した方法
「背景画像」を回転アニメーションさせる事はできません。が、
transform:rotate(角度);
によって、「要素」を回転アニメーションさせる事はできます。
となると、「要素」の下に「要素（背景用）」を配置して、「要素（背景用）」をtransform:rotateさせれば、見た目は「背景回転アニメーション」が実現できます^^
まず、HTMLのほうでは、
<div class="bgcnc">
<div class="ibgcnc"> </div>
<div class="i2bgcnc">ここに文章を書く</div>
</div>
とし、「bgcnc」というクラス名を持つdivの中に、「ibgcnc」「i2bgcnc」という２つのdivを入れました。
この「ibgcnc」を「要素（背景用）」として使用し、その上に表示したいものは「i2bgcnc」の中に書く事にします。
大枠である、「bgcnc」は、
.bgcnc{
position:relative;
width:300px;
height:200px;
overflow:hidden;
}
としました。
position:relatve;は文脈の流れ上に普通に配置するposition指定、幅300px、高さ200pxとサイズを決め、 overflow:hidden; で「サイズからはみ出した部分は表示しない」と指定しています。
次に、「要素（背景用）」である、「ibgcnc」については、
.ibgcnc{
position:absolute;
top:-150px;
left:-100px;
width:500px;
height:500px;
background-image:repeating-conic-gradient(#ccffcc,#000000,#ffcccc,#000000,#ccccff,#000000,#ccffcc 120deg);
animation:bgcnca 15s linear 0s infinite;
}
としました。
幅・高さともに余裕を持たせて500px（回転しても大枠からはみでない大きさ）とし、position:absolute; によって「大枠の中での絶対位置指定」にしています。
top:-150px; left:-100px; と、上下左右位置を調節して、「幅300pxに対して500pxのものを-100pxの位置、高さ200pxに対して500pxのものを-150pxの位置」とする事で、中央を合わせています。
背景は、
background-image:repeating-conic-gradient(#ccffcc,#000000,#ffcccc,#000000,#ccccff,#000000,#ccffcc 120deg);
と、最近その存在を知ったconic-gradientを使ってみました^^
「背景回転アニメーション」としては、他に画像ファイルであってもlinear-gradientに変えてもOKな部分です。
そして、 animation:bgcnca 15s linear 0s infinite; でこの要素を回転させるキーフレームを呼び出しています。（再生時間15秒、infinite＝無限繰り返し）
呼び出しているアニメーションはシンプルで、
@keyframes bgcnca{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
「要素」の角度を「0度」から「360度」に徐々に変化させる＝滑らかに回転する、というものですね。
最後に、その背景の上に表示する文字の部分は、
.i2bgcnc{
position:relative;
padding:0.6em;
color:white;
text-shadow:1px 1px 0px black;
}
としています。
この「position:relative;」は、入れておかないとposition:absolute;指定した背景用要素の方が前面に来てしまうので書いています。
あとは単に見た目の調整で、
padding:0.6em; 内側の余白0.6文字分
color:white; 文字色は白
text-shadow:1px 1px 0px black; 読みやすいように黒の影つき
としました。
おまけ
記事冒頭で少し触れた「background-size」と「background-position」の背景アニメーションサンプルとコード、書いてみるとこんな感じです。
コード
<style>
@keyframes bgsimple1a{
0%{background-size:40px 40px;}
100%{background-size:100px 100px;}
}
.bgsimple1{
width:300px;
height:200px;
padding:0.6em;
background-image:radial-gradient(circle at 50% 50%,#ccffccff 10%,#ccffcc00 30%);
border-radius:10px;
border:1px solid black;
animation:bgsimple1a 10s linear 0s infinite alternate;
}
</style>
<div class="bgsimple1">background-sizeのアニメーション</div>
コード
<style>
@keyframes bgsimple2a{
0%{background-position:0px 0px;}
100%{background-position:0px 200px;}
}
.bgsimple2{
width:300px;
height:200px;
padding:0.6em;
background-image:linear-gradient(15deg,#ccffccff,#ccffcc00,#ccffccff);
background-size:300px 20px;
border-radius:10px;
border:1px solid black;
animation:bgsimple2a 10s linear 0s infinite;
}
</style>
<div class="bgsimple2">background-positionのアニメーション</div>
それぞれ、divタグの二重化もせずに済み、クラスも１つで済みますね^^
あとがき
背景にまつわる指定に、positionとsizeがあって回転が無いのが不足なのか、要素に対するtransformプロパティが充実しすぎているのか、需要がありそうで実装されていない「背景回転アニメーション」を考えてみました。
※ググると同様のネタは見つかりますがｗ
もし、将来的に対応プロパティが実装されるとしたら…
background-rotate:30deg;
または
background-transforom:rotate(30deg);
みたいな感じかな？と妄想してみたり。（※ありません）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
