动画跳帧疑问
来源：2-14 编程练习
慕的地0823274
2018-10-17 11:58:12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:600px;
height:400px;
background: linear-gradient(90deg,gray,cyan 50%,gray);
border:5px solid black;
border-radius: 50%;
margin: 0 auto;
font-size: 60px;
font-weight: bolder;
text-align: center;
line-height: 400px;
position: absolute;
}
.color{
animation-name: hello;
animation-duration: 5s;
/* animation-timing-function: ease;
animation-delay: -1s;*/
animation-fill-mode: forwards;
}
@keyframes hello{
from {top:-500px;right:0;left:0;margin: 0 auto;}
to {top:0;right:0;bottom:0;left:0;margin:auto auto;}
}
/* @keyframes hello{
from {opacity: 0}
to {opacity: 1}
}*/
</style>
</head>
<body>
<div class="color">Hello World</div>
</body>
</html>动画中间有跳帧的现象！为啥？？？？
写回答
1回答
-
好帮手慕星星
2018-10-17
你的这个动画过程是有问题的，开始margin为0 auto;也就是只有水平方向上是居中显示的，然后有一个top值从-500px到0px的一个过程，但是在执行到50%左右过渡的时候，margin变为了auto auto，是水平和垂直方向上水平居中显示，这个时候还会从top为-500px开始，不过是相对于水平垂直居中时候的top为-500px。在动画过程中top值以及margin值都有改变，但是改变之后效果是不同的，所以会出现跳帧的情况。建议这样修改：
自己测试下，祝学习愉快~~
0
相似问题