見出し画像
Photo by twentynine

CSSとJavaScriptどちらを使う？今すぐ使える簡単なCSSアニメーションの紹介も！【右から左にテキストが移動するアニメーションを作ってみよう】

Tsubasa

こんにちは。デザイン好きのTsubasaです。🎨(*'ω'*)

気づいたら1年以上投稿が空いてしまいました。。
今後は、隙間時間を利用しながら
もう少しnoteの投稿数を増やしていければいいなぁと思ってます。☕

近況ですが
最近はweb制作とイラスト制作に主に力を入れています。
また約1年前に作成した自身のイラスト掲載サイト、
「しばけんイラスト」ではいろんな表情の可愛い柴犬の絵を投稿しています。✍✍✍
完全無料の可愛い柴犬のイラストが多数掲載していますので、お時間があるときに
是非覗いてみてください。🐶💛
https://illust-tabineko.com/

さて今日の記事の内容ですが、せっかくなので
コードについて少し触れようかなって思います。✨👏



【CSSとJavaScriptの特徴】

皆さん簡単なアニメーションを作りたいなぁって時、何を使っていますか？

私の場合は、ちょっとしたアニメーションを使う程度であれば、
断然CSSを使用します。
以下にそれぞれの特徴を説明しながら、理由を述べます。😊
(また今日はオススメのCSSアニメーションをひとつ紹介させて頂きます)

アニメーションは、ユーザの興味を引き付けたり、ユーザーを目的のページにスムーズに移動させる際に使われる必要不可欠なものです。

【CSSの特徴】
CSSはWebサイトのスタイルやレイアウトを指定するためのプログラミング言語です。
CSSだけでは、あんまり良いアニメーションは出来ないんじゃないか？と思っている方が偶にいらっしゃいますが、CSSだけでもアニメーションは豊富に作ることができるんです。👀
例えばanimation-timing-functionって聞いたことありますか？
これは直訳するとアニメーションタイミング機能。
その名の通り、アニメーションを徐々に早くしたり、一定速度で始まり、ゆっくりと終わらせたり...
と再生速度を変化できるプロパティです。

【JavaScriptの特徴】
Webページに動きをつけるためのプログラミング言語です。
自動スクロールやスライダー、検索機能が作れたりと
使えば機能面がかなり向上する優れものです。またCSSで付けたアニメーションに、より動きや装飾を加えてインパクトのあるアニメーションが作ることができる点がJavaScriptのメリットでもあります。
しかしJavaScriptは実行に時間がかかる為、ブラウザ全体の速度が低下します。いろんなユーザー、いろんなデバイスからの集客に焦点を当てる場合に
JavaScriptを多数使用すると、画面がクラッシュしたり、重くなったりと
ユーザーにストレスを与えてしまいます。
例えばちょっとしたトランスジョンにJavaScriptを使用する人は少ないですよね。

【CSSで作れる簡単なアニメーションの紹介】


さて上記CSSの説明で紹介した、animation-timing-functionですが、今日はこのanimation-timing-functionについて少し深堀していきたいと思います。✨
以下にコード全体と解説をまとめるので
是非webを勉強している方や、web制作をしている方は使ってみて下さい。👀💡

まずは代表的な5つを紹介しますね！

なんだこれ！？と思うかもしれませんが、大丈夫です。
できるだけ丁寧に解説していきますー💪

ease ゆっくり始まり、 徐々に加速し上がり、最後はゆっくりと終わります
ease-in 徐々に加速します
ease-out 徐々に減速します
ease-in-out 加速してから減速していきます
linear 最初から最後まで安定した一定の速度で変化します。

【使い方とコード】


上にまとめた5つが、animation-timing-functionで使う動きの種類です。
 使い方は簡単で、例えば徐々に加速したアニメーションを使いたいな～ってときは
animation-timing-function: ease-in;
と打つだけでOKです。👌

ここでは実際にコードを書いてease と ease-inを使ったアニメーションの違い、見え方を説明します。

まず「ease」と「ease-in」の文字が右から左へ流れるアニメーションを作りたいと思います。
ここでのHTMLではdiv idを使っていきたいと思います。

<body>
  <div id="ease">
  ease 
  </div>
  <div id="ease-in">
  ease-in 
 </div>
</body>

これで1行目に「  ease 」という文字が、2行目に  「ease-in」
という文字が表示されますね！
次にCSSです。
一つ一つ説明していきますね。☕

#ease {
  width: 100%;
  height: 100px;
  line-height:100px;
  overflow: hidden;
  background:white;

  animation-name: tsubasa;
  animation: tsubasa 5s  infinite;
  transform: translateX(0);
  animation-timing-function: ease;
  }

  #ease-in {
    width: 100%;
    height: 100px;
    line-height:100px;
    overflow: hidden;
    background:white;
  
    animation-name: tsubasa;
    animation: tsubasa 5s  infinite;
    transform: translateX(0);
    animation-timing-function: ease-in;
    }

 @keyframes tsubasa {
  0% {
    transform: translateX(100%); /* アニメーション開始時、右側に配置 */
  }
  100% {
    transform: translateX(-100%); /* アニメーション終了時、左側に移動 */
  }
}

まずwidth(幅)とheight(高さ)など基礎を固めます。
次にanimation-nameでアニメーションに好きな名前を付けましょう！
私は自分の名前の"tsubasa"をつけました。
(本来ならもっとアニメーションに関連性のある名前を使う
のが得策ですが、ここでは遊び心を込めて自分の名前を使いました( ´∀｀ )笑)
animation: tsubasa 5s infinite;
は5秒毎で永遠にそのアニメーションが動くってことです。
infiniteは英語で「無限」っていう意味です。

transform: translateX(0);について。
transformは回転や伸縮、移動などの動きを指定できるプロパティです。
それに"X"が付くと、translateXになり、それがX軸方向へ平行移動するときに使われる関数となります。
（高校の時に数学で習ったX軸Y軸みたいな感じ）
translateX(0) でとりあえず要素を そのままの位置に 留めます。
(ちなみに、縦軸、つまりY軸をいじりたいなぁって時はtranslateY()を使います。)

そして先ほど紹介した、
animation-timing-function:
を付けていきます。違いをわかりやすくするために、
animation-timing-function: ease;
animation-timing-function: ease-in;
の2つを用意しました。

そしてアニメーションの兼目となる@keyframesを有効にします。
アニメーションがどのように進行するかを指定するためには、
このキーフレームを使って開始位置から終了位置までの変化を定義する必要があります。

0% {
transform: translateX(100%);
}

で、まずはアニメーションの開始位置を設定します。
アニメーションが開始する時点（0%）で、要素を画面外の左側に配置します。
次に終了時の位置を設定します。
右→左に動くアニメーションを作りたいので

100% {
transform: translateX(-100%);

とします。
translateX(-100%) は、要素を左に 100% 移動させることを意味します。

では以下の動画で、easeとease-inの違いを見てみましょう！
(noteでは動画を貼れないのでYoutubeの方で限定公開でアップしました🎥
6秒の動画です)


かなり動きに違いがありますね！👀
先ほど説明した通り
easeは徐々に加速し上がり、途中減速し、最後はゆっくりと終わり、
ease-inは徐々に加速していますね。

こんな感じでCSSにも面白いアニメーションの定義がたくさんあるので
特にシンプルなアニメーションを作るときは、動きに負担のかかるJavaScript
よりもオススメです。

といった感じで今回はJavaScriptとCSSについての説明、
また簡単なアニメーションを作り方をひとつ紹介させて頂きました。
最後まで読んで下さりありがとうございます！😊🙏

また今後も、webについてやイラスト、コードについてなど、または日常生活の呟きなど..紹介できればいいなと思ってます。
少しでも面白いなって思った方は、イイネを押してくださるとうれしいです！💓

ではまた次回お会いしましょう！👋😊


・しばけんイラスト🐶
https://illust-tabineko.com/


いいなと思ったら応援しよう！