Position setting issues in CSS3 animation_html/css_WEB-ITnose

Different methods of horizontal centering:

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

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

Vertical centering Several implementation methods:

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

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

Several methods of centering:

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

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

Transparency control (gradient effect)

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

Delay effect control:

When using @ When creating animations with keyframes, be sure to bind it to a selector, otherwise the animation will not occur. In addition, the name and duration of the animation must be defined. If the duration is omitted, the animation is not allowed because the default value is 0. If it is an overall animation composed of several delayed animations, you can set different delays for each small animation so that they appear one after another. When setting different states at different times for an object, it is best to use percentages to specify the change. Time, or the keywords "from" and "to" are equivalent to 0% and 100% (the beginning and end of the animation respectively).

The code example is as follows:

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;}}