css動畫縮放不起作用

我使用css關鍵幀創建動畫。我有這樣的：css動畫縮放不起作用

@keyframes experience { 
0% { 
-webkit-transform: scale(0,0); 
     transform: scale(0,0); 
-webkit-transform: translateY(40px); 
     transform: translateY(40px); 
opacity: 1; 
} 
60% { 
-webkit-transform: scale(1,1); 
     transform: scale(1,1); 
-webkit-transform: translateY(40px); 
     transform: translateY(40px); 
opacity: 1; 
} 
100% { 
-webkit-transform: translateY(0px); 
     transform: translateY(0px); 
opacity: 1; 
} 
}

一切正常，除了它擴展在一個Scale屬性去有生它代替。我用jQuery插件航點的工作和div有類

.workitem { 
    position: relative; 
    width: 1000px; 
    height: 200px; 
    background-color: #333; 
    margin: 0 auto; 
    opacity: 0; 
    -webkit-transform: scale(0); 
     transform: scale(0); 
}

當航點命中我添加類

.experience { 
    -webkit-transform: scale(0); 
      transform: scale(0); 
    -webkit-animation: experience 2s ease-in forwards ; 
      animation: experience 2s ease-in forwards ; 
}

它使用上述動畫。

來源

2014-10-31 andre de waard

你可以把這個放在一個jsfiddle幫我嗎？ – chdltest 2014-10-31 20:52:26

這是因爲你實際上要重寫你的scale變換..拿一起來看看下面的CSS：

transform: scale(0,0); 
    transform: translateY(40px);

這將是一樣的設置是這樣的：

color: red; 
    color: blue;

在這種情況下，您會希望元素的color屬性爲blue，因爲該樣式規則排在第二位，並覆蓋red。

這與transform一樣，即使您使用不同類型的轉換，它們仍共享相同的transform屬性。

您會看到突然跳躍，因爲您從設置爲scale(0,0)開始，但只要動畫開始，您現在只是翻譯元素，而不是縮放，因此它立即恢復爲正常。

可以通過聲明你的風格是這樣解決這個問題，而不是：

transform: scale(0,0) translateY(40px);

而且在所有適當的供應商從那裏前綴明顯增加！

來源

2014-10-31 21:03:03

使用

@-webkit-keyframes

Webkit使用的關鍵幀的前綴了。完整的例子：

@keyframes anim{ 
    to{transform:rotate(30deg);} 
} 
@-webkit-keyframes anim{ 
    to{-webkit-transform:rotate(30deg);} 
} 
#element{ 
    animation:anim; 
    -webkit-animation:anim; 
}

注：我用的變換，因爲我想表明，前綴在關鍵幀的前綴版本只使用

來源

2014-10-31 20:56:09 DividedByZero

css動畫縮放不起作用

回答

相關問題