我有個問題。我是 CSS 影片的新手，不知道為什么這在 safari 中不起作用。我正在嘗試在 img 上制作我的成長影片，它可以在 chrome 和所有其他瀏覽器中運行，但在 Safari 中不起作用。我是否忘記了一行 css 之類的東西？
img {
animation: scale-bubble;
animation-duration: 1.2s;
animation-delay: 1.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
transform: scale(0%);
animation-play-state: running;
animation-iteration-count: 1;
-webkit-animation: scale-bubble;
-webkit-animation-duration: 1.2s;
-webkit-animation-delay: 1.5s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
-webkit-transform: scale(0%);
-webkit-animation-play-state: running;
-webkit-animation-iteration-count: 1;
}
@keyframes scale-bubble {
0% {
transform: scale(0%);
-webkit-transform: scale(0%);
}
100% {
transform: scale(100%);
-webkit-transform: scale(100%);
}
}
@-webkit-keyframes scale-bubble {
0% {
transform: scale(0%);
-webkit-transform: scale(0%);
}
100% {
transform: scale(100%);
-webkit-transform: scale(100%);
}
}
uj5u.com熱心網友回復：
嘗試這個 ：
-webkit-transform:scale(0.9, 0.9);
uj5u.com熱心網友回復：
轉換：CSS 中的 scale(...) 需要一個數字或一對數字而不是 %。
見MDN
sx A
<number>表示縮放向量的橫坐標。sy A
<number>表示縮放向量的縱坐標。如果未定義，則其默認值為 sx，從而導致保持元素縱橫比的統一縮放。
此參考定義了數字的含義https://developer.mozilla.org/en-US/docs/Web/CSS/number
所以使用 scale(0) 和 scale(1) 而不是 0% 和 100%。
注意：我們不知道您縮放的完整背景關系，但您可能需要等待影像加載，具體取決于您的用例。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/367042.html
下一篇：滑動擴展影片旁邊的專案