.square3 {
height: 100px;
width: 200px;
background-color: #f56d4a;
margin-bottom: 20px !important;
position: absolute;
animation-name: shift;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 0.7s;
/* animation-direction: alternate; */
animation-iteration-count: infinite;
}
@keyframes shift{
from{
left: 0;
}to{
left: 100px;
}
}<div class="square3"></div>查看這支筆以了解它的全部內容這是這支筆。
我希望框/div 向右移動然后回到其正常狀態，我嘗試使用過渡屬性，left但它仍然沒有按我希望的那樣作業。
uj5u.com熱心網友回復：
請使用百分比并設定關鍵幀如下。
.square3 {
height: 100px;
width: 200px;
background-color: #f56d4a;
margin-bottom: 20px !important;
position: absolute;
animation-name: shift;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 0.7s;
/* animation-direction: alternate; */
animation-iteration-count: infinite;
}
@keyframes shift{
0% {left: 0px;}
50% {left: 100px;}
100% {left: 0px;}
} <div class="square3"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/315324.html
上一篇：僅按鈕觸發影片CSS
下一篇：退出過渡完成時防止頁面上升