4
回答
css3动画为什么就是不动呢
华为云4核8G,高性能云服务器,免费试用   

模拟一个页面加载的动画效果,为什么单独下载下来就不动了,有懂得吗?帮忙解释一下。

http://wap.koudaitong.com/v2/showcase/feature?alias=jv8t824l

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.loading-animate{
	 position:absolute;
	 left:0;
	 right:0;
	 top:0;
	 bottom:0;
	 margin:auto;
	 width:60px;
	 height:60px;
	 background-color:#00aacf;
	 -webkit-animation:rotateplane 1.2s infinite ease-in-out;
	 animation:rotateplane 1.2s infinite ease-in-out;
 }
</style>
</head>

<body>
<div class="loading-animate"></div>
</body>
</html>



<无标签>
举报
颜小机
发帖于4年前 4回/2K+阅
共有4个答案 最后回答: 4年前
@-webkit-keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }


    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }


    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}

引用来自“lukaka”的评论

@-webkit-keyframes rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }


    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }


    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}
是什么原理呢,能解释一下么?

  1. 你的定位方式错了,应该选择相对定位
  2. 你指写了个div的样式那样的话依然是静态的又如何能成为动画呢,需要使用@keyframes这个注解定义你的动画效果

正确的是


.loading-animate{
     position:display;
     margin:auto;
     width:60px;
     height:60px;
     background-color:#00aacf;
     -webkit-animation:rotateplane 1.2s infinite ease-in-out;
     animation:rotateplane 1.2s infinite ease-in-out;
 }

@keyframes rotateplane
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes rotateplane
{
from {left:0px;}
to {left:200px;}
}




顶部