這個問題在這里已經有了答案： CSS“左”不作業 5 個答案 1 小時前關閉。
這可能是非常簡單的事情，我只是很愚蠢。該按鈕不會顯示影片。當我運行代碼時，沒有顯示錯誤。
HTML：
<button id='testBtn' class='test'>Test</button>
CSS：
.test{
animation-name: changePos;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes changePos {
0%{left: 0px;}
50%{left: 1000px;}
100%{left: 0px;}
}
.test{
animation-name: changePos;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes changePos {
0%{left: 0px;}
50%{left: 1000px;}
100%{left: 0px;}
}<button id='testBtn' class='test'>Test</button>uj5u.com熱心網友回復：
在制作影片之前檢查這些樣式是否適用于元素
@keyframes changePos {
0% {
margin-left: 0px;
}
50% {
margin-left: 1000px;
}
100% {
margin-left: 0px;
}
}
uj5u.com熱心網友回復：
像這樣添加影片：
animation: changePos 5s infinite;
.test {
width: 100px;
height: 100px;
position: relative;
animation: changePos 3s infinite;
}
@keyframes changePos {
0%{left: 0px;}
50%{left: 1000px;}
100%{left: 0px;}
}<button id='testBtn' class='test'>Test</button>uj5u.com熱心網友回復：
Setposition: relative;
你也可以簡單地使用影片，比如animation: changePos 4s linear 0s infinite alternate;
@keyframes changePos {
0% {left: 0px;}
50% {left: 400px;}
100% {left: 0px;}
}
.test{
animation-name: changePos;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
position: relative;
/*animation: changePos 4s linear 0s infinite alternate;*/
}<button id='testBtn' class='test'>Test</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/406461.html
標籤：
上一篇：如何在純CSS中修復此浮動標簽？