我的 CSS 动画有这个问题。我有一个元素位置绝对居中于页面中间，当我放置动画时，它会向右移动，当动画完成时，它会移回到页面中间。这是代码：
@keyframes motto
from
opacity: 0
transform: translate3d(0, -100%, 0)
to
opacity: 1
transform: none
#home
.motto
position: absolute
top: 50%
left: 50%
margin-right: -50%
transform: translate(-50%, -50%)
animation-name: motto
animation-duration: 2s
h1
margin: 0
font-size: 42px
font-weight: 100
opacity: .5
-webkit-animation-duration: 2s
提前谢谢！
@keyframes motto {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.motto {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
animation-name: motto;
animation-duration: 2s;
}
.motto h1 {
margin: 0;
font-size: 42px;
font-weight: 100;
opacity: .5
-webkit-animation-duration: 2s;
}
<div class="motto"><h1>css <span>animation</span></h1></div>
在 CSS 中使用以下行.motto :
animation-fill-mode: forwards;
这会将元素设置为在动画的最后一帧中显示。
@keyframes motto {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.motto {
position: absolute;
width: 400px;
left: 50%;
top: 50%;
margin-left: -200px;
animation-name: motto;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.motto h1 {
margin: 0;
font-size: 42px;
font-weight: 100;
opacity: .5;
text-align: center;
}
<div class="motto"><h1>css <span>animation</span></h1></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
