CSS ANIMATION入門

SUNABACO

2020年7月6日 20:03

こんにちは！SUNABACOプログラミングスクールスタッフのまっちまです！

CSS ANIMATIONでアニメーションを作成することでCSSのレイアウトについて深く学ぶことができます！

まずはCSS ANIMATIONについてみていきましょう！

CSS ANIMATIONってなに？

CSSアニメーションは、CSSの機能のひとつです。ユーザーが何かしらのアクションを起こしたときにアニメーションが再生されます。現在、すべての主要な検索エンジンで採用されています。

JavaScriptを使ってアニメーションすればいいじゃないかという声もありますが、現在CSSアニメーションは広くWebサイトで使われています。

HTMLとCSSのみで作成可能なので手軽さという点で魅力的なのかもしれません。

CSS TransitionとCSS Animationの2つの機能がありますが、今回はCSS Transitionを使っていきます。

CSS Transitionってなに？

「hover」や「click」でCSS プロパティが変化する際のアニメーションの速度を操作ができます。通常CSSが切り替わると見た目も突然切り替わってしまいますが、一定の時間で見た目を変化させることができます。

例えば、ある要素を白色から黒色に変更した場合、通常は即座に前景色が替わります。 CSS トランジションを有効にすると、加速カーブに従った時間間隔で変更が行われ、変更の速度や感覚をカスタマイズすることもできます。

やってみよう！

説明だけだとイメージがしづらいとおもいますので、まずは実戦で動いているものを見てみましょう！

長方形のdivの横幅が広がるだけの単純なアニメーションですが、画像や他の要素と組み合わせることで面白い印象にすることができます。

今回は、カメの甲羅を背負った老人から習得できそうなエネルギー弾を撃ってみようと思います！！！

まずはHTMLを書いていきましょう！

クリックイベント用のボタン、キャラクター用の画像、エネルギー弾用のdivを作成していきます。

inputタグのチェックボックスのオンオフでクリックイベントを発生させます。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="./css/style.css">
   <title>cssAnimation</title>
</head>
<body>
   <div class="box">
       <div class="human">
           <img src="https://4.bp.blogspot.com/-Vou7mpFTTCU/U1T3v48P4zI/AAAAAAAAfWQ/VxbHXkov7W4/s800/figure_stop.png" alt="">
       </div>
       <div class="kamehameha"></div>
       <label for="toggle">ボタンをおしてね！</label>
       <input type="checkbox" id="toggle">
       <div class="kamehameha2"></div>
   </div>
   
</body>
</html>

次にCSSを書いていきましょう

inputタグは見えないように「display: none;」にします。

「input:checked+要素名」とすることで、チェックボックスにチェックが入った時に要素のCSSが変更される記述が出来ます。

:checkedとは？

疑似クラスのひとつです。ユーザーは要素をチェック/選択することでCSSを変更することができ、要素のチェックや選択を外すとこの状態から外れます。

.box{
   width: 100%;
   height: 600px;
   position: relative;
   text-align: center;
   font-size: 50px;
   padding-top: 50px;
}
.human{
   height: 300px;
   width: 300px;
   position: absolute;
   right:0;
   bottom: 0;
}
.human img{
   width: 100%;
}
.human .anime1{
   display:none;
}
.kamehameha{
   height: 240px;
   width: 240px;
   background-color: rgb(0, 255, 234);
   border-radius: 50%;
   position: absolute;
   right: 300px;
   bottom: 20px;
}

.kamehameha2{
   height: 100px;
   width: 100px;
   background-color: rgb(0, 255, 234);
   position: absolute;
   right: 400px;
   bottom: 85px;
}
label{
   cursor: pointer;
   background-color: gray;
   padding: 10px 30px;
   border-radius: 10px;
   box-shadow: 0px 0px 10px;
}
input{
 display: none;
}

/* クリックイベント */
input:checked+.kamehameha2{
 width: 2000px;
 transition: 1s;
}

完成物を見てみよう！

倍率を0.25倍でみると全画面でみることができます。

こちらのNoteはHanahanaworksが運営するコワーキングスペース＆プログラミングスクール「SUNABACO」の提供でお送りしています。

SUNABACOでは通常のプログラミングスクールの他に、休日のイベントとしてUnityやBlenderのイベントを定期開催しています。イベント情報は公式サイトやTwitterで入手することができます。

SUNABACO
SUNABACOは、全く新しい価値を描こうとするすべての人のための遊び場です。

https://sunabaco.com/

Twitterアカウント→https://twitter.com/sunabaco_ebetsu

SUNABACOは年中無休で12:00~22:00の時間帯で営業しております。気になった方は是非お近くのSUNABACOまでお越しください。

この記事が気に入ったらサポートをしてみませんか？