css3延时动画

不太理解属性都是什么意思，但是有动画效果，我也是惊呆了

<style>
#animated_div{animation:animated_div 4s 1;
    -moz-animation:animated_div 4s 1;
    -webkit-animation:animated_div 4s 1;
    -o-animation:animated_div 4s 1; width:800px; height:500px; position:relative; }
 
@keyframes animated_div
    {
    0%        {transform: rotate(0deg); top:-600px;}
    25%        {transform: rotate(0deg);top:-600px;}
    50%        {transform: rotate(0deg);top:50px;}
    55%        {transform: rotate(0deg);top:50px;}
    70%        {transform: rotate(0deg);top:-50px;}
    100%    {transform: rotate(0deg);top:0px;}
    }

@-webkit-keyframes animated_div
    {
    0%        {-webkit-transform: rotate(0deg);top:-600px;}
    25%        {-webkit-transform: rotate(0deg);top:-600px;}
    50%        {-webkit-transform: rotate(0deg);top:50px;}
    55%        {-webkit-transform: rotate(0deg);top:50px;}
    70%        {-webkit-transform: rotate(0deg);top:-50px;}
    100%    {-webkit-transform: rotate(0deg);top:0px;}
    }

@-moz-keyframes animated_div
    {
    0%   {-moz-transform: rotate(0deg);top:-600px;}
    25%  {-moz-transform: rotate(0deg);top:-600px;}
    50%  {-moz-transform: rotate(0deg);top:50px;}
    55%  {-moz-transform: rotate(0deg);top:50px;}
    70%  {-moz-transform: rotate(0deg);top:-50px;}
    100% {-moz-transform: rotate(0deg);top:0px;}
    }

@-o-keyframes animated_div
    {
    0%   {transform: rotate(0deg);top:-600px;}
    25%  {transform: rotate(0deg);top:-600px;}
    50%  {transform: rotate(0deg);top:50px;}
    55%  {transform: rotate(0deg);top:50px;}
    70%  {transform: rotate(0deg);top:-50px;}
    100% {transform: rotate(0deg);top:0px;}
    }


</style>

<div id="animated_div">数据统计及分析系统</div>

 

转载于:https://www.cnblogs.com/wangbei2016/p/5319777.html