我正在尝试使用 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，但我必须为大学项目做，所以要小心，如果你知道问题出在哪里，请告诉我，先谢谢了！
1 回答
冉冉说
TA贡献1877条经验 获得超1个赞
你应该使用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>
- 1 回答
- 0 关注
- 49 浏览
添加回答
举报
0/150
提交
取消