我的页面中有一个 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/