CSSの復習とアニメーション

ut.code(); Learnの復習

Q1. メディアクエリはどんなときに使いますか？

Q2. 次のうち、画面幅が 400px のときに適用されるメディアクエリはどれですか？

Q3. フレックスボックスを利用する際、display: flex を適用する要素は、配置したい要素の何にあたりますか？

Q4. グリッドを利用する際、列の幅を指定するために使うプロパティはどれ？

Q5. grid-column: 3 / 4 と書いた場合、その要素はグリッドの何列目に配置されますか？

全問正解できなかった方は、ut.code(); Learn のCSS による配置(発展) をもう一度読むことをオススメします。

アニメーション

CSS を用いれば、簡単なアニメーションを作成することもできます。

`@keyframes`

まず、@keyframes を用いたアニメーションについて説明します。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

@keyframes でアニメーションを定義して、animation-name プロパティでアニメーションを適用します。

 @keyframes example {
  from {
    background-color: lightcoral;
  }
  to {
    background-color: lightblue;
  }
}

.box {
  height: 100px;
  width: 100px;
  background-color: black;
  animation-name: example;
  animation-duration: 3s;
}

% を用いて、アニメーションを定義することもできます。

@keyframes example {
  33% {
    background-color: lightcoral;
  }
  67% {
    background-color: lightblue;
  }
}

.box {
  height: 100px;
  width: 100px;
  background-color: black;
  animation-name: example;
  animation-duration: 3s;
}

transition

次は、transition について学習していきます。 transition とは、CSS で要素のプロパティが変化したときに、その変化をアニメーションとして表示するためのプロパティです。早速例を見ていきましょう。

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: background-color 0.5s ease;
  }

.box:hover {
    background-color: red;
  }

この例では background-color プロパティが変更されたときのアニメーションが transition プロパティで指定されています。 box という div 要素がホバーされたときに background-color が変更され、そのときに transition プロパティによって、0.5 秒かけて変化します。変化する際の挙動については、ease というイージング関数で指定されています。ease 以外にも ease-in-out や ease-out などがあります。タイミング関数の後に transition-delay や transition-behavior を指定することもできます。

演習

以下のコードのコメントの下に CSS を書いて、自由にアニメーションをつけてください。

.box {
  height: 100px;
  width: 100px;
  background-color: lightblue;
  border-radius: 50%;
  animation-name: move;
  animation-duration: 3s;
  position: absolute;
  left: 50%;
}

@keyframes move-around {
    /* 自由にアニメーションをつけてください！ */
}

例えば、このように書いたらどうなるでしょうか？

.box {
  height: 100px;
  width: 100px;
  background-color: lightblue;
  border-radius: 50%;
  animation-name: move;
  animation-duration: 3s;
  position: absolute;
  left: 50%;
}

@keyframes move {
  30% {
    left: 30%;
    transform: translateX(-80px);
  }
  50% {
    background-color: lightcoral;
  }
  70% {
    left: 70%;
    transform: translateX(50px);
    background-color: lightgreen;
  }
}