在Chrome中，CSS3動畫不能回覆到0％

我的頁面中有一個CSS3動畫。它運作良好，直到它回到0％或100％。在Chrome中，CSS3動畫不能回覆到0％

它不會返回，而是它飛起來！

而這隻發生在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>

來源

2016-03-15 Hank

哪裏是100％？讓它回來。 –

沒有100％，所以我應該回到0％，不是嗎？ – Hank

單獨50％會使動畫卡在50％..你應該也包括100％ –

我沒有做一個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>

來源

2016-03-15 01:21:13

是的，它的工作原理！但爲什麼呢，我們總是需要寫100％還是僅僅在這種情況下？ – Hank

我不知道它是否有效的CSS動畫語法，但一般來說，百分之五十意味着總數的一半，這意味着有什麼缺失; –

在Chrome中，CSS3動畫不能回覆到0％

回答

相關問題