我正在嘗試使用 CSS3 動(dòng)畫(huà)創(chuàng)建動(dòng)畫(huà)?；旧?，當(dāng)我加載頁(yè)面時(shí)，我希望 h1 從下到上，介紹段落從右到左滑動(dòng)命令：1) 段落從頁(yè)中右向左滑動(dòng)；2）然后標(biāo)題（hello）從上到下滑動(dòng)。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 它是從右到左中心頁(yè)面的段落的動(dòng)畫(huà)。段落沒(méi)問(wèn)題，可以正常工作。h1 動(dòng)畫(huà)問(wèn)題：2 個(gè)問(wèn)題：它在 Firefox 中閃爍，看起來(lái)工作起來(lái)很奇怪；在 Chrome 中它不會(huì)出現(xiàn)，也不會(huì)運(yùn)行。我是動(dòng)畫(huà)新手，我總是避免使用 flash ecc，但我必須為大學(xué)項(xiàng)目做，所以要小心，如果你知道問(wèn)題出在哪里，請(qǐng)告訴我，先謝謝了！
1 回答
冉冉說(shuō)
TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超1個(gè)贊
你應(yīng)該使用transform: translate(). 在這種情況下效果會(huì)更好
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 關(guān)注
- 125 瀏覽
添加回答
舉報(bào)
0/150
提交
取消