CSS 3遷移とアニメーション

1.トランジションInternet Explorer 10、Firefox、ChromeおよびOperaはtransitionプロパティをサポートします.Safariには接頭辞-webkit-が必要です.Internet Explorer 9以降のバージョンでは、transitionプロパティはサポートされていません.CSS 3遷移は、要素が一つのスタイルから別のスタイルに徐々に変化する効果である.これを実現するには、(1)どの(2)CSS属性に効果を追加するかを規定する時間長(2)時間長が規定されていない場合は、デフォルト値が0であるため、遷移効果はありません.
マウスが箱を通ると、箱が変わり、マウスが離れると、元のスタイルに戻ります.

div
{
width:100px;
height:200px;
border:2px solid blue;
background-color:gray;
transition:width 2s,height 2s;
}
div:hover{
width:150px;
height:300px;
transform:rotate(60deg);
}

2.アニメーションInternet Explorer 10、FirefoxおよびOperaは@keyframesルールおよびanimationプロパティをサポートします.ChromeとSafariには、接頭辞-webkit-Internet Explorer 9が必要であり、@keyframeルールやanimationプロパティはサポートされていません.@keyframesでアニメーションを作成する場合は、セレクタにバインドします.そうしないとアニメーション効果は発生しません.少なくとも以下の2つのCSS 3のアニメーション属性を規定することで、アニメーションをセレクタにバインドすることができる:(1)アニメーションの名前を規定する(2)アニメーションの時間を規定する

div
{
width:100px;
height:200px;
border:2px solid blue;
background-color:gray;
animation:myfirst 5s;
}
@keyframes myfirst
{
from { background:gray;}
to { background:blue ;}
}

アニメーションの名前と時間を定義する必要があります.時間の長さを無視した場合、既定値は0ですので、アニメーションは許可されません.

div
{
width:100px;
height:200px;
border:2px solid blue;
background-color:gray;
animation:myfirst 5s;
position:relative;
}
@keyframes myfirst
{
0%   {
     background:red; left:0px; top:0px;}
25%  {
     background:yellow; left:200px; top:0px;}
50%  {
     background:blue; left:200px; top:200px;}
75%  {
     background:green; left:0px; top:200px;}
100% {
     background:red; left:0px; top:0px;}
}