我正在嘗試使用 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 關注
- 135 瀏覽
添加回答
舉報
0/150
提交
取消