css3动画为啥就是不动呢
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3动画为啥就是不动呢相关的知识，希望对你有一定的参考价值。
模拟一个页面加载的动画效果，为什么单独下载下来就不动了，有懂得吗？帮忙解释一下。
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>
按F12选中class为tpl-scroll js-tpl-scroll-container的DIV删除以后出来载入的div，它的Class是ui-loading。去掉他的display:none;属性我们就能看见载入图标了。
-webkit-animation:rotateplane 1.2s infinite ease-in-out;通过这段代码我们能知道这个animation的动画名是rotateplane，在开发者工具中查找相关到文件是showcase_ddb08a6630.css。在源码里面寻找rotateplane关键字能找到以下动画关键帧代码
@-webkit-keyframes rotateplane0%
-webkit-transform: perspective(120px)
50%
-webkit-transform: perspective(120px) rotateY(180deg)
100%
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
将这段代码复制到CSS里面再试试~
参考技术A你试试
@-moz-keyframes card_off_index 0% background: #333;50% background: #333;-moz-transform: scaleY(0);transform: scaleY(0);
50.1% -moz-transform: scaleY(0);transform: scaleY(0);background: #FFF;
100% background: #FFF;-moz-transform: scaleY(1);transform: scaleY(1);
参考技术B 估计浏览器不兼容了 参考技术C 代码贴出来
以上是关于css3动画为啥就是不动呢的主要内容，如果未能解决你的问题，请参考以下文章
Firefox 和 CSS3 动画 - 为啥我的文本会抖动？
为啥我的 CSS3 动画在 Chrome 中的表现如此缓慢？
为啥这个 CSS3 动画在 MS Edge 或 IE11 中不起作用？