ログイン
問題14

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

アイコン画像

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

ボックスアニメーションを展開しよう!
親要素を沿うようにボックスをアニメーションしてみましょう

見本を動画を参考に作成してください。

ブラウザのアイコン期待する画面


タグアイコン解答ソースコード

              <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%と指定することでアニメーションの滞在フェーズを切り分けることができます。
こちら展開/応用していいアニメーション作っていきましょうね!
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる