#12 簡単なアニメーションをつけてみよう

#12 簡単なアニメーションをつけてみよう

時間的変化であります。transitionプロパティは４つあるそうで、
transition-property、 transition-duration、 transition-timing-function、 transition-delay
の各プロパティの値をまとめて指定することができるとのこと。

CSS3

<style>
 　　 div {
   　　　　width: 200px;
 　　 　　 height: 100px;
   　　　　padding: 60px;
   　　　　margin: 15px;
　　　　　 background: radial-gradient(yellow, green);
  　　　　 border:2px solid black;
  　　　　 font-size:50px;
 　　　　  font-width:bold;
　　　　　 transition:all 1s eace 2s　
 　　　 }
      div:hover {
           height: 200px;
           background:red;
　　　　｝  </style>

HTML

（Bioggerでは自動的にプロパティの順番が変更されるらしい？）

<div style="background-color: border:2px solid black; background: radial-gradient(yellow, green); height: 100px; margin: 15px; padding: 60px; width: 200px; font-size:50px; font-width:bold;">
<b>みばえ</b></div>
<div hover="height: 200px; background: red;">
という記述は・・・あり得ないようです・・・

みばえ
×_(._.)_

onmouseover属性, onmouseout属性という別の世界なるようです。

また、「画像」を対象にすれば「CSS必要なし！」ともなるとか。