我在 CSS 過渡效果方面遇到了一些問題。我不明白為什么，但它不起作用。這是一個不起作用的演示：
https://codyhouse.co/demo/ink-transition-effect/index.html
這是一篇關于如何完成此效果的文章（之前，何時起作用）：
https://codyhouse.co/gem/ink-transition-effect
我正在除錯的代碼是這樣的：
https://codepen.io/1019/pen/YzxzNGX
HTML 檔案：
<body>
CSS ANIMATIONS TEST
<div class='cd-transition-layer'>
<div class="bg-layer"></div>
</div>
</body>
CSS檔案：
.cd-transition-layer {
position: fixed;
top: 0;
left: 0;
z-index: 30;
height: 100%;
width: 100%;
}
.cd-transition-layer .bg-layer {
position: absolute;
left: 50%;
top: 50%;
z-index: 15;
transform: translateY(-50%) translateX(-2%);
height: 100%;
width: 2500%;
background: url('https://i.imgur.com/9uDdPAP.png') no-repeat 0 0;
background-size: 100% 100%;
animation: cd-sprite 5s steps(24);
animation-fill-mode: forwards
}
.cd-transition-layer.opening .bg-layer {
z-index: 15;
animation: cd-sprite .8s steps(24);
animation-fill-mode: forwards
}
@keyframes cd-sprite {
0% {
transform: translateY(-50%) translateX(-2%)
}
100% {
transform: translateY(-50%) translateX(-98%)
}
}
你能幫我找出問題所在嗎？
謝謝 ！
編輯：好的，很奇怪：在重新出現之前，div 似乎在影片程序中完全消失了。如果我一直關注檢查器中的 div，它就會停留在那里。是因為它太長（2500% 寬度）嗎？
uj5u.com熱心網友回復：
移動大 div
似乎在基于 webkit 的瀏覽器中非常快速地在螢屏上設定大 div 影片會導致渲染/閃爍。
如果我不得不猜測，這可能是由于性能原因，瀏覽器切斷了不在視口中的東西。當移動到下一幀時，它將沒有準備好渲染的像素，從而導致閃爍。
當您steps(24)從影片中洗掉 時，它變得更加明顯。
div 將在螢屏上滑動，并在某些時候停止可見。
改用背景位置
影片時，我們也可以選擇只移動背景而不是在螢屏上移動 div。
background: url("https://i.imgur.com/9uDdPAP.png") no-repeat;
background-size: 2500% 100%; /* Size is needed to stretch 1 frame to fit the div */
background-position: 0% 0%; /* we can start from frame 0 */
animation: cd-sprite 1s steps(24);
/* the animation is the same, we only move the background instead. (in 24 steps) */
@keyframes cd-sprite {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 0%;
}
}
* {
box-sizing: border-box;
}
.cd-transition-layer {
position: fixed;
top: 0;
left: 0;
z-index: 30;
height: 100%;
width: 100%;
}
.cd-transition-layer .bg-layer {
position: absolute;
left: 50%;
top: 50%;
z-index: 15;
height: 100%;
width: 100%;
background: url("https://i.imgur.com/9uDdPAP.png") no-repeat;
background-size: 2500% 100%;
background-position: 4.16% 0%;
transform: translateY(-50%) translateX(-50%);
animation: cd-sprite 1s steps(24) infinite;
animation-direction: alternate;
animation-delay: 1s;
animation-fill-mode: forwards;
border: 36px solid red;
}
@keyframes cd-sprite {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 0%;
}
}<body>
<div class='cd-transition-layer'>
<div class="bg-layer"></div>
</div>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/315332.html
上一篇：SwiftUI更改過渡顏色
下一篇：在R中影片直方圖