いつも読んで頂きありがとうございます。
たまに夜な夜なCSSで遊んでいるのんべえです！以前、ＬＳＳさんもCSSシェイプを記事
にして私もCSSシェイプの座標をExcelで調べるという記事を書きましたが、CSSシェイ
プでアニメーションが作れるので紹介します。
こちらのサイトを参考にしています。
<basic-shape> - CSS: カスケーディングスタイルシート | MDN
同じ座標数であればいろんなアニメーションが可能
図形は座標で切出す(おさらい）
CSSシェイプのＬＳＳさんの記事内で説明がありますが図形は頂点座標を0%としてX座
標とY座標を指定して切出すという感じです。座標数が多くなるとそれだけ座標も多く
なります。平行四辺形で作ってみます。
- ①座標～X=30%、Y=0%
- ②座標～X=100%、Y=0%
- ③座標～X=70%、Y=100%
- ④座標～X=0%、Y=100%
コードにすると
.hisig{
background-color:lightgreen;
clip-path:polygon(30% 0%,100% 0%,70% 100%,0% 100%);
padding:10% 0% 20% 30%;
}
--></style>
<div class="hisig">中に入れる文章 </div>
ここでpolygonは多角形を表しています。
porygon(〇% 〇%～）は①からの座標順となります。
paddingは文字からの内部距離を表しているので%を変更すると図形の大きさも変わり
ますので調整が面倒かもしれません。図形によってはpadding-left:○○;で左側の余白だ
けの設定だけでいけるのもあると思います。paddingはいろいろ構成があるので設定で
いろいろ試すのもありです。
平行四辺形から四角形のアニメーション
CSSシェイプアニメーションは座標数が同じであれば、どんな形からでもアニメーショ
ンが可能です。簡単なアニメーションとして、先ほど作成した平行四辺形から四角形で
やってみます。四角形の座標は（0% 0%,100% 0%,100% 100%,0% 100%）です。
これでアニメーションを作るとこうなります。
コードにすると
<style><!--
.hisisik {
background: lightgreen;
clip-path: polygon(30% 0%,100% 0%,70% 100%,0% 100%);
padding:10% 0% 20% 30%;
animation: 1.0s poly infinite alternate ease-in-out;
}
@keyframes poly {
from {
clip-path: polygon(30% 0%,100% 0%,70% 100%,0% 100%);
}
to {
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
}
--></style>
<div class="hisisik">中に入れる文章</div>
fromが平行四辺形の座標、toが四角形の座標でanimation:1.0sを変更するとアニメーシ
ョンの速度が変わります。
アニメーションに合わせて文字を大きくしたり色変更も可能
小さい四角形から大きい四角形のアニメーションを作ります。
アニメーションに合わせて文字も大きくして色も変えてみます。
コードにすると
<style><!--
.cp1 {
width:200px;
height:150px;
background: orange ;
clip-path: polygon(10% 10%, 90% 10%, 90% 40%, 10% 40%);
padding:5% 5% 0% 20%;
animation: 0.4s sikaku infinite alternate ease-in-out;
}
@keyframes sikaku {
from {
clip-path: polygon(10% 10%, 90% 10%, 90% 40%, 10% 40%);
transform:scale3d(1,1,1);
}
to {
clip-path: polygon(5% 5%, 95% 5%, 95% 45%, 5% 45%);
transform:scale3d(1.3,1.3,1.3);
background: red;
}
--></style>
<div class="cp1"><strong>中に入れる文章</strong></div>
widthとheightで大きさを決めます。
transform:scale3d(1.3,1.3,1.3)は文字の大きさが1.3倍になるという意味で数値を上げる
と文字が大きくなりますが画像も大きくなります。
background: red;で変更後、赤色にしていますが、redを変えると違う色に変えられま
す。
<strong>を削除すると文字の太さが標準になります。
transform:scale3dをコードから削除すると文字変化なしのアニメーションになりま
す。
座標を多くすればハート方も可能
CSSシェイプは他に円なども作れます。また、ハート型などはSVGのpath()を使って定義
すると作れるそうですが、サポートしていないプラウザがあるのでporygonで座標を多
くしてハート型を作ってみました。
コードにすると
<style><!--
.heart {
width:100px;
height:5px;
background: orange ;
clip-path: polygon(3% 23%, 3.1% 20%, 4% 15%, 6% 10.8%, 8% 7.9%, 10% 5.9%, 14% 3%, 18% 1%, 22% 0.2%, 25% 0%, 28% 0.2%, 30% 0.7%, 34% 2%, 38% 4%, 42% 7%, 46% 12%, 50% 19%, 54% 12%, 58% 7%, 62% 4%, 66% 2%, 70% 0.7%, 72% 0.2%, 75% 0%, 78% 0.2%,82% 1%,86% 3%, 90% 5.9%, 92% 7.9%, 94% 10.8%, 96% 15%, 96.9% 20%, 97% 23%, 96% 31%, 92% 40.2%, 88% 46.9%,84% 52%, 80% 56.2%, 76% 60.2%,72% 64%, 68% 67.2%, 62% 72%, 56% 76.1%, 50% 80%, 44% 76.1%, 38% 72%, 32% 67.2%, 28% 64%, 24% 60.2%,20% 56.2%, 16% 52%, 12% 46.9%,8% 40.2%,4% 31%);
padding:12% 5% 20% 10%;
animation: 1.5s heart infinite alternate ease-in-out;
}
@keyframes heart {
from {
clip-path: polygon(3% 23%, 3.1% 20%, 4% 15%, 6% 10.8%, 8% 7.9%, 10% 5.9%, 14% 3%, 18% 1%, 22% 0.2%, 25% 0%, 28% 0.2%, 30% 0.7%, 34% 2%, 38% 4%, 42% 7%, 46% 12%, 50% 19%, 54% 12%, 58% 7%, 62% 4%, 66% 2%, 70% 0.7%, 72% 0.2%, 75% 0%, 78% 0.2%,82% 1%,86% 3%, 90% 5.9%, 92% 7.9%, 94% 10.8%, 96% 15%, 96.9% 20%, 97% 23%, 96% 31%, 92% 40.2%, 88% 46.9%,84% 52%, 80% 56.2%, 76% 60.2%,72% 64%, 68% 67.2%, 62% 72%, 56% 76.1%, 50% 80%, 44% 76.1%, 38% 72%, 32% 67.2%, 28% 64%, 24% 60.2%,20% 56.2%, 16% 52%, 12% 46.9%,8% 40.2%,4% 31%);
);
transform:scale3d(1,1,1);
}
to {
clip-path: polygon(7.9% 24%, 8.1% 20%, 10% 15%, 12% 11.9%, 14% 9.8%, 16% 7.9%, 18% 6.8%, 20% 5.8%, 22% 5%, 24% 4.4%, 26% 4.1%, 30% 4.3%, 32% 4.8%, 36% 6%, 40% 8%, 45% 13%, 50% 21%, 55% 13%, 60% 8%, 64% 6%, 70% 4.8%, 72% 4.3%, 74% 4.1%, 76% 4.4%, 78% 5%,80% 5.8%,82% 6.8%, 84% 7.9%, 86% 9.8%, 88% 11.9%, 90% 15%, 91.9% 20%, 92.1% 24%, 91.8% 30%, 90% 36%, 88% 40%,84% 46%, 80% 51.5%, 76% 56%,72% 59.8%, 68% 63%, 62% 68%, 56% 72%, 50% 76%, 46% 73.6%, 42% 70.8%, 38% 67.9%, 32% 63%, 28% 59.5%,24% 56%, 20% 51.5%, 16% 46%,12% 40%,8.1% 30%);
transform:scale3d(1.3,1.3,1.3);
background: red ;
}
}
--></style>
<div class="heart"><strong>中に入れる文章</strong></div>
ハート型は文字を入れない方が大きさを自由に変えられるので使いやすいかもしれませ
ん。文字を入れない場合でも<div class=～は残してください。
座標をもっと多くするともうちょっと綺麗なハート型が作れると思いますが、途中
で嫌になって妥協したのんべえです。
最後に
爆発型の多角形などでも座標を変えると複雑なアニメーションが可能ですが文字を入れ
るとwidth、heightやpaddingの設定で結構変化しますので画像の大きさや文字配置の調
整が面倒な部分があります。ただ、paddingで内部余白を設定してもスマホだと位置が
ずれるのが難点です。また、文字無しでpaddingも設定無しにするとwidthとheightだけ
で大きさを変更できます。
写真画像も挿入出来ますがサイズ調整が面倒かもしれません。
最近、CSSシェイプの画像を簡単に作成するサイトを見つけたので貼っておきます。座
標も出てくるので楽だと思います。いろいろな図形でアニメーションを作って遊ぶのも
どうでしょう。
ちなみに星型と10角形は座標数が同じなのでこうなります。
コードの質問は分かる範囲でお答えしますが、半分素人なので正解を出せない場合があ
ります。
