跨瀏覽器的css動畫更改

我正在使用動畫svg's。問題是我在Chrome和Firefox中遇到了兩種不同的行爲。跨瀏覽器的css動畫更改

這是fiddle。和CSS：

@-webkit-keyframes breeze{ 
    0% {-webkit-transform: rotate(0deg);} 
    50% {-webkit-transform: rotate(3deg);} 
    100% {-webkit-transform: rotate(0deg);} 
} 
@keyframes breeze{ 
    0% {transform: rotate(0deg);} 
    50% {transform: rotate(3deg);} 
    100% {transform: rotate(0deg);} 
} 
#pine{ 
    -webkit-transform-origin: 50% 100%; 
    -webkit-animation: breeze 5s ease-out infinite; 
    transform-origin: 50% 100%; 
    animation: breeze 5s ease-out infinite;  
    }

在Chrome中的動畫我想要的方式，但在Firefox它需要在頂部而不是底部的旋轉點。

關於如何讓它工作的任何想法？

來源

2015-04-08 Lautaro

看到這個答案：http://stackoverflow.com/a/16708049/1064270。看來在Firefox中'svg transform-origin'屬性存在一些問題 – Gael

我會建議只使用svg爲松樹，並使用背景顏色爲背景的div。 FF和Chrome應該有相同的結果。

.bg { 
 
    background: #ADDDD9; 
 
    width: 559px; 
 
    height: 346px; 
 
} 
 

 
svg { 
 
    -webkit-transform-origin: 50% 100%; 
 
    -webkit-animation: breeze 5s ease-out infinite; 
 
    transform-origin: 50% 100%; 
 
    animation: breeze 5s ease-out infinite; 
 
}

<div class="bg"> 
 
    <!-- svg --> 
 
</div>

我更新了小提琴，一起來看看。 https://jsfiddle.net/k4wz32e6/

你可能想重新保存你的SVG，因爲現在viewbox的數字太大了。

來源

2015-04-08 02:16:28

我不知道爲什麼transform-offset在Firefox中不起作用，但通過讓要旋轉的對象的原點座標位於您希望旋轉的點的位置，您始終可以讓自己更容易。

這樣做的另一個優點是，您可以對位於SVG其他任何位置的樹使用完全相同的CSS規則;只需更改父項<g>元素的translate()屬性。

@-webkit-keyframes breeze { 
 
    0% { -webkit-transform: rotate(0deg); } 
 
    50% { -webkit-transform: rotate(3deg); } 
 
    100% { -webkit-transform: rotate(0deg); } 
 
} 
 
@keyframes breeze { 
 
    0% { transform: rotate(0deg); } 
 
    50% { transform: rotate(3deg); } 
 
    100% { transform: rotate(0deg); } 
 
} 
 
#pine { 
 
    -webkit-animation: breeze 5s ease-out infinite; 
 
    animation: breeze 5s ease-out infinite; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" width="559" height="509" 
 
    viewBox="0 0 559 509"> 
 
    <rect fill="#ADDDD9" width="559" height="346.7" /> 
 
    <g transform="translate(225.5,334.9)"> 
 
    <g id="pine"> 
 
     <path fill="#B8B6DA" d="M-57.6-86.3 0-320.1 57.5-86.3Z" /> 
 
     <path fill="none" stroke="#8D6EA9" stroke-width="3.6" 
 
      stroke-linecap="round" d="M0 0 0-255.7M-20-183.5 0 
 
      -165.6M-27-130.6 0-96.2 23.4-123.8M-13.9-232-.2-211.2 
 
      13.9-218.3M22.2-195.6 1.9-173.1" /> 
 
    </g> 
 
    </g> 
 
</svg>

來源

2015-04-08 02:49:37

跨瀏覽器的css動畫更改

回答

相關問題