CSS3動畫中的位置設定問題，css3動畫位置設定

CSS3動畫中的位置設定問題，css3動畫位置設定

水平置中的不同方法實現：

 position: absolute; margin:0 auto; left:0; right:0;

position: absolute; left:50%; -webkit-transform:translateX(-50%);

 

垂直置中的幾種實現方法：

 position: absolute; margin:auto 0; top:0; bottom:0;

position: absolute;top:50%;-webkit-transform:translateY(-50%);

中心置中的幾種方法：

position: absolute;margin:auto;top:0;bottom:0;left:0;right:0;

  position: absolute;  top:50%;  left:50%;  -webkit-transform:translateX(-50%) translateY(-50%);

透明度的控制（漸顯效果）

@-webkit-keyframes opacity_kf {            0% {                opacity: 0;            }            100% {                opacity: 1;            }         }

延時效果的控制：

當使用@keyframes建立動畫時，一定要把它捆綁到某個選取器，否則不會產生動畫。另外必須定義動畫的名稱和時間長度，如果忽略時間長度，那麼動畫不允許，因為預設值是0。如果是幾個動畫延時出現構成的整體動畫，那麼可以為每個小動畫設定不同延時，令他們相繼出現，當為一個對象設定不同時間的不同狀態時最好使用百分比來規定變化發生的時間，或用關鍵詞“from”“to”等同於0%和100%（分別為動畫的開始和結束）。

程式碼範例如下：

div{animation: myfirst 5s;-moz-animation: myfirst 5s;    /* Firefox */-webkit-animation: myfirst 5s;    /* Safari 和 Chrome */-o-animation: myfirst 5s;    /* Opera */}

@keyframes myfirst{0%   {background: red;}25%  {background: yellow;}50%  {background: blue;}100% {background: green;}}@-moz-keyframes myfirst /* Firefox */{0%   {background: red;}25%  {background: yellow;}50%  {background: blue;}100% {background: green;}}@-webkit-keyframes myfirst /* Safari 和 Chrome */{0%   {background: red;}25%  {background: yellow;}50%  {background: blue;}100% {background: green;}}@-o-keyframes myfirst /* Opera */{0%   {background: red;}25%  {background: yellow;}50%  {background: blue;}100% {background: green;}}

@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;}}@-moz-keyframes myfirst /* Firefox */{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;}}@-webkit-keyframes myfirst /* Safari 和 Chrome */{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;}}@-o-keyframes myfirst /* Opera */{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;}}