我的页面上有一个CSS3动画。它可以很好地工作，直到它回到0%或100%。
它不回来，而是飞起来！
这只发生在Chrome上，而不是Firefox上。
@keyframes my-right{
50%{
-moz-transform-origin:right;
-webkit-transform-origin:right;
transform-origin:right;
-moz-transform:perspective(1000px) translateX(46px) translateZ(50px) rotateY(180deg);
-webkit-transform:perspective(1000px) translateX(46px) translateZ(50px) rotateY(180deg);
transform:perspective(1000px) translateX(46px) translateZ(50px) rotateY(180deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style type="text/css">
.basic{
position: absolute;
width: 48px;
height: 48px;
background: #FF2200;
text-align: center;
border: 1px solid black;
-moz-transition: height 1s linear;
-webkit-transition: height 1s linear;
transition: height 1s linear;
}
#right{
top:100px;
left:150px;
-moz-animation:my-right 10s linear infinite;
-webkit-animation:my-right 10s linear infinite;
animation:my-right 10s linear infinite;
z-index: 100;
}
@-webkit-keyframes my-right{
50%{
-moz-transform-origin:right;
-webkit-transform-origin:right;
transform-origin:right;
-moz-transform:perspective(1000px) translateX(46px) translateZ(50px) rotateY(180deg);
-webkit-transform:perspective(1000px) translateX(46px) translateZ(50px) rotateY(180deg);
transform:perspective(1000px) translateX(46px) translateZ(50px) rotateY(180deg);
}
}
@keyframes my-right{
50%{
-moz-transform-origin:right;
-webkit-transform-origin:right;
transform-origin:right;
-moz-transform:perspective(1000px) translateX(46px) translateZ(50px) rotateY(180deg);
-webkit-transform:perspective(1000px) translateX(46px) translateZ(50px) rotateY(180deg);
transform:perspective(1000px) translateX(46px) translateZ(50px) rotateY(180deg);
}
}
</style>
<div id="right" class="basic">right</div>
</body>
</html>最佳答案
我给它做了一个100%的关键帧回到它原来的位置：
.basic {
position: absolute;
width: 48px;
height: 48px;
background: #FF2200;
text-align: center;
border: 1px solid black;
-moz-transition: height 5s linear;
-webkit-transition: height 5s linear;
transition: height 5s linear;
}
#right {
top:100px;
left:150px;
-moz-animation:my-right 5s linear infinite;
-webkit-animation:my-right 5s linear infinite;
animation:my-right 5s linear infinite;
z-index: 100;
}
@-webkit-keyframes my-right {
50% {
-moz-transform-origin:right;
-webkit-transform-origin:right;
-moz-transform:perspective(1000px) translateX(46px) translateZ(50px) rotateY(180deg);
-webkit-transform:perspective(1000px) translateX(46px) translateZ(50px) rotateY(180deg);
}
100% {
-moz-transform-origin:right;
-webkit-transform-origin:right;
-moz-transform:perspective(1000px) translateX(-46px) translateZ(-50px) rotateY(-180deg);
-webkit-transform:perspective(0px) translateX(0px) translateZ(0px) rotateY(0deg);
}
}
@keyframes my-right {
50% {
transform-origin:right;
transform:perspective(0px) translateX(46px) translateZ(50px) rotateY(180deg);
}
100% {
transform-origin:right;
transform:perspective(0px) translateX(0px) translateZ(0px) rotateY(0deg);
}
}<div id="right" class="basic">right</div>关于html - Chrome中CSS3动画无法正常恢复到0％，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36000819/