問題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¥
完了にする!
活動記録をTweetする
1.HTMLの宣言をしてみよう
keyfram内で25%,50%,75%,100%と指定することでアニメーションの滞在フェーズを切り分けることができます。
こちら展開/応用していいアニメーション作っていきましょうね!