這個jsfiddle顯示了兩個使用影片的div。第一個按我的要求變化。第二個則沒有。不同的是，在第二個中加入了100%的關鍵幀。我添加它是因為W3Schools上的這個說明
。提示。為了獲得最佳的瀏覽器支持，您應該始終同時定義 0% 和 100% 選擇器。
這是我正在使用的代碼。我如何撰寫代碼以使影片出現在最上面的那條中？
<style>
.rotateOne {
background-color:黃色。
animation: rotateOneFrames 2s;
}
@keyframes rotateOneFrames {
0% {transform: rotate(360deg) scale(-1, 1); }
}
.rotateTwo {
animation: rotateTwoFrames 2s;
}
@keyframes rotateTwoFrames {
0% {transform: 旋轉(360deg) 尺度(-1, 1); }
100% {transform: 旋轉(360deg) scale(-1, 1); }
</style>>
<div style="width:150px;">/span>
<div class="rotateOne"/span>>
<div>第1行</div>/span>
<div>第2行</div>/span>
<div>第2行</div>
</div>/span>
<div class="rotateTwo"/span>>
<div>第1行</div>/span>
<div>第2行</div>/span>
<div>第2行</div>
</div>/span>
</div>/span>
uj5u.com熱心網友回復：
如果你的0%和100%的值都完全相同，它將保持靜態。
。span class="hljs-selector-class">.rotateOne {
background-color:黃色。
animation: rotateOneFrames 2s;
}
@keyframes rotateOneFrames {
0% {transform: rotate(360deg) scale(-1, 1); }
}
.rotateTwo {
animation: rotateTwoFrames 2s;
}
@keyframes rotateTwoFrames {
0% {transform: 旋轉(360deg) 尺度(-1, 1); }
100% {transform: 旋轉(-360deg) 尺度(1, 1); }
}<div style="width: 150px;">
<div class="rotateOne"/span>>
<div>第1行</div>/span>
<div>第2行</div>/span>
<div>第2行</div>
</div>/span>
<div class="rotateTwo"/span>>
<div>第1行</div>/span>
<div>第2行</div>/span>
<div>第2行</div>
</div>/span>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/330561.html
標籤：
上一篇：腳本AppendRow在頂部
下一篇：學習爬蟲移動端01天