我試圖在我的專案中制作一個跑步的圣誕老人。
當影片從 0% 和 50% 開始時，如何回圈變換：scaleX(1) 和變換：scaleX(-1)？
setTimeout(function(){
//Enter your stuff here
$('.animation').css("transform", "scaleX(1)")
}, 7500); .animation img {
max-width: 100%;
}
.animation {
width: 50px;
position: absolute;
bottom: 0;
animation: example 15s infinite;
padding: 5px 9px 1px 0;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
transform: scaleX(-1)
}
@keyframes example {
0%,
100% {
left: 0;
/* background: white; */
}
40% {
/* background: green; */
}
30% {
/* background: yellow; */
}
20% {
/* background: orange; */
}
50% {
left: 97%;
/* background: blue; */
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="animation">
<img src="https://lh3.googleusercontent.com/pw/AM-JKLX6lpuXIUQzWYC8J9vlnsS9Cb9irs-2kPKBM9XaugC4iDCag2-7w-zC7BSQls0Ea51YewUFFSJquODLZ8PfaAoqelAXOlCKmh0H7Cn9G5HcwX_u2XNT_tvr8ZD5as6He3dpMrrVH_-ZCaG1xctS_Tei=s512-no" alt="run santa run">
</div>Codepen 鏈接：演示
uj5u.com熱心網友回復：
這是一個很好的做法。
我嘗試使用 JS/Jquery 偵聽器來解決它，但這可能很困難，因為我們需要跟蹤 keyFrame 更改而不僅僅是開始/結束點。
所以我想只通過 CSS 來解決它。您的要求是在圣誕老人到達視口時翻轉圣誕老人。如果我們只是將 transform: scaleX(1) 設定為 50%，那么圣誕老人將在中途翻轉。
因此，我將標記點設定為 1%、49% 和 99%，以確保圣誕老人不會在這些點翻轉。以下是我根據您的 codepen 鏈接撰寫的代碼：
@keyframes example {
0%,
100% {
transform: scaleX(-1)
/* background: white; */
}
1%{
left:1%;
transform: scaleX(-1);
}
99%{
left:1%;
transform: scaleX(1);
}
40% {
/* background: green; */
}
30% {
/* background: yellow; */
}
20% {
/* background: orange; */
}
49% {
left:96%;
transform: scaleX(-1)
}
50% {
transform: scaleX(1);
/* background: blue; */
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/371617.html
標籤：javascript 查询