CSS 3 Animation 工作奇怪，不适用于 Chrome
[英]CSS 3 Animation works weird and doesn't work for Chrome
问题描述
I'm trying to create an animation with CSS3 animations.
我正在尝试使用 CSS3 动画创建 animation 。 Basically when I load page, I would like the h1 gone from down to up and intro paragraph slides from right to left基本上，当我加载页面时，我希望 h1 从下到上，介绍段落从右到左滑动
Order:命令：
1) Paragraph slides from right to left-center page; 1) 段落从右到左中间页面滑动；
2) Then the title (hello) slide from up to down. 2）然后标题（你好）从上往下滑动。
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>
I tried this code, dadestra it's the animation for the paragraph from right to left-center page.我试过这个代码，dadestra 它是 animation 用于从右到左中心页面的段落。 Paragraph it's ok, it works properly.段落没关系，它工作正常。
Issue with h1 animation: 2 problems: h1 animation 的问题：2 个问题：
it blinks in Firefox, looks that it works very weird;它在 Firefox 中闪烁，看起来很奇怪；
In Chrome it doesn't appear, doesn't run.在 Chrome 中它不会出现，也不会运行。
I'm new to animations, I always avoid from flash ecc, but I have to do for university project, so be careful and if you know what's problem, tell me, Thanks advance!我是动画新手，我总是避免使用 flash ecc，但我必须为大学项目做，所以要小心，如果你知道有什么问题，请告诉我，谢谢提前！
1 个解决方案
解决方案1
1 已采纳 2020-04-09 15:52:32
You should use transform: translate() .您应该使用transform: translate() 。 It will work better in this situation在这种情况下它会更好地工作
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.