基本的に怠Diary

学習ログを残したい

CSSでアニメーション

そういえばPHPで掲示板すら作ったことなかったことを

思い出したので現在作成しています。

とはいえ一からここに書くの面倒くさいのでところどころ初めて触れた

ものや再利用できそうな技術等を

少しずつまとめていこうと思います。


今回はCSSのアニメーション

参照元(丸パクリに近い。)
niwakasoft.jp


body{
 animation: back 20s linear infinite;
}

@keyframes back {
 0% {background-position: 0 0;}
 100% {background-position: 500px 500px;}
}

Keyframes とはanimetionで移動する範囲を設定する
項目?と捉えています。

スタートが0px、0pxでゴールが500px,500px的な


そしてそのスタートからゴールまで20秒掛けて

進んでいくという設定なのはわかるのですが

残り2つがイマイチピンと来ない。


なのでさらに調べるとlinearは一定の速度で移動するという設定で

infiniteは無限に繰り返すという設定のようです。



そんなこんなでログイン画面の見た目だけ完成。


f:id:saborin78:20160504184324j:plain


本当は後ろが動いています。

貧相ですがまあ、頑張ったほうじゃないんでしょうか。。。


次はサーバーサイドでログイン認証を実装したいです。