您的位置：首页 > Web前端 > CSS

css3延时动画

2016-03-25 15:46 537 查看
不太理解属性都是什么意思，但是有动画效果，我也是惊呆了

<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航