98日目 | web制作

本日は…

■css3のanimationを使おうの回

・バナーを回転させて、二枚の画像を交互に表示する
・ニュースティッカーで文字表示
・ボタンを光ってる雰囲気にする
アニメーションを使う

の3パターン。
基本の形式は、

#front {
  animation: flipFront 5s infinite alternate;/*alternateはアニメーションが1回再生したら逆再生になる*/
  -webkit-animation: flipFront 5s infinite alternate;
}
#back {
  animation: flipBack 5s infinite alternate;
  -webkit-animation: flipBack 5s infinite alternate;
}

animationを指定して、その下に

@keyframes flipFront {
  0% {transform: rotateY(0deg);}
  45% {transform: rotateY(0deg);}/*Y軸を中心にして、45%までは見えてるけど、55％になったら
  うらっかえしになってみえない*/
  55% {transform: rotateY(180deg);}
  100% {transform: rotateY(180deg);}
}

という形でanimationを指定していく。
これは画像を回転させるanimation。

■明日のテストの予告
思い出すこと…
・HTML５の６つの要素の役割と名称
・HTML５で追加されたフォームの新要素
・レスポンシブについて→フルードイメージとメディアクエリ、ブレイクポイントについて
など。developer.mozilla.org
audioタグ、videoタグ模範になので一応。qiita.com

■ちょっと関係ないけどgoogleimage的なやつのソートに関する参考サイト覚書kirinblog.com