忍者CODE

ログイン

14
フェーズ毎のアニメーションを実装しよう

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
ボックスアニメーションを展開しよう!
親要素を沿うようにボックスをアニメーションしてみましょう

見本を動画を参考に作成してください。
期待する画面
ログインして解答を見る
コードのアイコン

解答ソースコード

            <div>
  <span></span>
</div>
¥HTML¥
          
            @keyframes movebox {
  25% {
    top: 0;
    left: 100%;
    transform: translateX(-100%);
  }
  50% {
    top: 100%;
    left: 100%;
    transform: translate(-100%, -100%);
  }
  75% {
    top: 100%;
    left: 0;
    transform: translateY(-100%);
  }
  100% {
    top: 0;
    left: 0;
  }
}
div {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #8d8d8d;
}
span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  animation: movebox 5s linear 0s 1 forwards;
}
¥CSS¥
          
答えのアイコン

解説

アニメーションの設定については中級その21を参考にしましょう。

keyfram内で25%,50%,75%,100%と指定することでアニメーションの滞在フェーズを切り分けることができます。
こちら展開/応用していいアニメーション作っていきましょうね!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET