CSS 3 动画工作很奇怪，不适用于 Chrome
我正在尝试使用 CSS3 动画创建动画。基本上，当我加载页面时，我希望 h1 从下到上，介绍段落从右到左滑动
命令：
1) 段落从页中右向左滑动；
2）然后标题（hello）从上到下滑动。
p.intro {
-webkit-animation: dadestra 4s;
-moz-animation: dadestra 4s;
-ms-animation: dadestra 4s;
-o-animation: dadestra 4s;
animation: dadestra 4s;
animation-name: dadestra;
animation-duration: 3s;
position:relative;
animation-delay:-1s;
}
@keyframes dadestra {
0% { left: 100%;}
100%{ left: 0%;}
}
@-moz-keyframes dadestra {
0% { left: 100%;}
100%{ left: 0%;}
}
@-webkit-keyframes dadestra {
0% { left: 100%;}
100%{ left: 0%;}
}
@-o-keyframes dadestra {
0% { left: 100%;}
100%{ left: 0%;}
}
@-ms-keyframes dadestra {
0% { left: 100%;}
100%{ left: 0%;}
}
/* Welcome */
h1 {
color:#fff;
text-align: center;
background:#111112;
text-shadow: 1px 1px 1px red;
border-radius: 10px 10px 10px;
box-shadow: 0px 1px 7px 1px red;
position:relative;
-webkit-animation: hello;
animation-name: hello;
animation-duration: 4s;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
-o-animation-duration: 4s;
z-index:1;
}
@keyframes hello {
0% { top:60%; left: 0%; }
75% {top: 30%; left: 0%; }
100% { top:0%; left: 0%; }
}
@-moz-keyframes hello {
0% { top:60%; left: 0%; }
75% {top: 30%; left: 0%; }
100% { top:0%; left: 0%; }
}
@-webkit-keyframes hello {
0% { top:60%; left: 0%; }
75% {top: 30%; left: 0%; }
100% { top:0%; left: 0%; }
}
@-ms-keyframes hello {
0% { top:60%; left: 0%; }
75% {top: 30%; left: 0%; }
100% { top:0%; left: 0%; }
}
@-o-keyframes hello {
0% { top:60%; left: 0%; }
75% {top: 30%; left: 0%; }
100% { top:0%; left: 0%; }
}
<html>
<body>
<h1>Welcome guest!</h1>
<p class="intro">bla bla bla bla</p>
<p class="intro">bla bla bla</p>
</body>
</html>
我尝试了这段代码，dadestra 它是从右到左中心页面的段落的动画。段落没问题，可以正常工作。
h1 动画问题：2 个问题：
它在 Firefox 中闪烁，看起来工作起来很奇怪；
在 Chrome 中它不会出现，也不会运行。
我是动画新手，我总是避免使用 flash ecc，但我必须为大学项目做，所以要小心，如果你知道问题出在哪里，请告诉我，先谢谢了！
慕勒34288721回答
-
冉冉说
你应该使用transform: translate(). 在这种情况下效果会更好body { overflow: hidden;}h2 { color:#fff; text-align: center; background:#111112; text-shadow: 1px 1px 1px red; border-radius: 10px 10px 10px; box-shadow: 0px 1px 7px 1px red; position:relative; animation: top 1s 1s; animation-fill-mode: forwards; transform: translateY(-100px);}@keyframes top { 0% { transform: translateY(-100px); } 100% { transform: translateY(0px); }}p { animation: left 1s;}@keyframes left { 0% { transform: translateX(100vw); } 100% { transform: translateX(0vw); }}<h2>Hello</h2><p>Paragraph is here</p>
随时随地看视频慕课网APP
相关分类
Html5