回転アニメーションの見本
下のCodePenのような回転アニメーションはCSSで簡単に作ることができます。
See the Pen 回転アニメーション｜歪んだ円 by Satoru Shimizu (@sat-simizu) on CodePen.
では、どのようなHTMLとCSSを書けば実装できるのか説明していきます。
正方形を回転させる
まずは簡単な図形を例に回転アニメーションのご説明します。下のCodePenは正方形の回転アニメーションです。
See the Pen 正方形の回転アニメーション by Satoru Shimizu (@sat-simizu) on CodePen.
HTMLとCSSを見ていきましょう。
HTML
正方形を回転させるだけなら、下のようにタグは1個あれば実装できます。
<body>
<!-- 正方形 -->
<div class="shape-1">
</div>
</body>CSS
CSSで回転アニメーションに関係する箇所を抜粋したのが下のコードです。
// 正方形
.shape-1{
margin: 100px auto;
width: 200px;
height: 200px;
background-color: rgba(240, 230, 140);
// 回転アニメーション設定
animation: 20s linear infinite rotation1;
}
// 回転アニメーション設定
@keyframes rotation1{
0%{ transform:rotate(0);}
100%{ transform:rotate(360deg); }
}個別に説明していくと、最初に下のように「@keyframes + キーフレーム名」で回転エフェクトを設定します。
// 回転アニメーション設定
@keyframes rotation1{
0%{ transform:rotate(0);}
100%{ transform:rotate(360deg); }
}- キーフレーム名：自由に命名してよい。この例は「rotation1」としている。
- 0%{}：{}内にアニメーション始点の状態を「プロパティ：値」のように書く。
- 100%{}：{}内にアニメーション終点の状態を「プロパティ：値」のように書く。
- 回転アニメーションの場合は0%{}と100%{}の行はコピペで実装できます。
つづいて、回転させる要素（正方形）に回転エフェクトの下記の記述を加えます。
// 正方形
.shape-1{
// 回転アニメーション設定
animation: 20s linear infinite rotation1;
}
- 20s：キーフレーム0%から100%までにかかる時間（秒）
- linear：等速（動きの加減速：他にease-in、ease-out、ease-in-outがある）
- infinit：無限再生（１回だけ再生なら、「1」と書く）
- rotation1：キーフレーム名（アニメーションさせたいキーフレームの名前を書く）
文字情報の背景図形のみを回転させる
つづいて、最初に紹介した文字情報の背景図形のみが回転するアニメーションの作り方を紹介します。下にCodePenを置いて置きますので、必要に応じて動作やコードをご確認下さい。
See the Pen 回転アニメーション｜歪んだ円 by Satoru Shimizu (@sat-simizu) on CodePen.
この背景の歪んだ円形はCSSで書いています。作り方は別記事にまとめましたので参照願います。
そして、アニメーション動作に関わるキーフレーム関係のCSSの書き方も、上で説明したものと全く同じですので、説明は省略します。
では、何が違っているのかというと、文字は不動で、背景画像のみを回転させる場合はHTML構造を少し工夫する必要があるだけです。
HTML
下にHTML全文を載せておきます。HTML構造自体はシンプルです。
<body>
<!-- 文字情報と図形を囲う親タグ -->
<div class="shape-wrapper">
<!-- 文字情報 -->
<p class="shape-text">
回転アニメーション
</p>
<!-- 不定形図形 -->
<div class="shape-1"></div>
</div>
</body>- 文字情報と図形を囲う親タグ：子要素に文字情報タグと図形タグを含む
- 文字情報：図形タグとの関係は兄弟要素
- 不定形図形：文字情報タグとの関係は兄弟要素
CSS
下にCSSの抜粋を載せておきます。アニメーションの設定は上で説明した正方形の場合と全く同じです。
// 図形と文字全体を囲うタグ
.shape-wrapper{
margin: 100px auto;
width: 300px;
height: 300px;
position: relative;
}
// 文字のスタイル
.shape-text{
position:absolute;
width: 100%;
height: 100%;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
z-index: 1; //図形より上のレイヤーになるように設定
}
// 不定形図形
.shape-1{
width: 300px;
height: 300px;
background-color: rgba(240, 230, 140);
border-radius:62% 38% 63% 37% / 40% 60% 40% 60%;
// 回転アニメーション設定
animation: 10s linear infinite rotation1;
}
// 回転アニメーション設定
@keyframes rotation1{
0%{ transform:rotate(0);}
100%{ transform:rotate(360deg); }
}文字情報が配置される場合のCSSの特徴をまとめると下のようになります。
- 図形と文字全体を囲うタグ：position: relative;
- 文字情報：position:absolute;およびz-index: 1;。z-index値は背景図形よりも上のレイヤーになるように設定して下さい。
要は、文字情報をz-indexで浮かせているのですが、z-indexを未設定にすると背景図形の裏側に文字情報が配置され、見えなくなります。
一応、これらの部分の抜粋も載せておきます。
// 図形と文字全体を囲うタグ
.shape-wrapper{
position: relative;
}// 文字のスタイル
.shape-text{
position:absolute;
z-index: 1; //図形より上のレイヤーになるように設定
}画像の図形を回転させる場合
細かい説明を省きますが、図形タグに対して疑似要素（::beforeまたはafter）で図形画像を読み込ませ。その疑似要素に対して、animationプロパティを書けば実装できます。
