HTML_CSS
Googleでログイン問題23：要素を永遠に回転させよう
要素を永遠に回転させてみましょう!
動画を参考に実装してください。
動画を参考に実装してください。
あらかじめエディタに書くコード
<div></div>
¥HTML¥
期待する画面
解答ソースコード
<div></div>
¥HTML¥
@keyframes spinbox {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(180deg);
}
}
div {
width: 200px;
height: 100px;
border: 1px solid #000;
background-color: red;
margin-top: 100px;
animation: spinbox 1s linear 0s infinite forwards;
}
¥CSS¥
補足
animationプロパティで設定できる値について解説しておきます。
animationで指定している要素は実は単体のプロパティをまとめて指定しています。
今回でいうとspinboxはanimation-nameプロパティの値で
その後の1sはanimation-durationプロパティの値になります。
このように個別のプロパティが纏められているのです。
指定する際に順番は基本的にありません。
少しルールがあったりするのでそのあたりは一度調べて理解しておきましょう。
永遠に回転する要素が作れるようになれば、ホームページなどでよくみる永遠に動き続けるスライダーも作れると思うので是非チャレンジしてみましょう。
animationで指定している要素は実は単体のプロパティをまとめて指定しています。
今回でいうとspinboxはanimation-nameプロパティの値で
その後の1sはanimation-durationプロパティの値になります。
このように個別のプロパティが纏められているのです。
指定する際に順番は基本的にありません。
少しルールがあったりするのでそのあたりは一度調べて理解しておきましょう。
永遠に回転する要素が作れるようになれば、ホームページなどでよくみる永遠に動き続けるスライダーも作れると思うので是非チャレンジしてみましょう。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
永遠にアニメーションし続けるには
animationプロパティにinfiniteを指定してあげると実現できます。