我想在 css 中每 2 秒轉換一次 x 軸四次并回到原始位置。
示例 gif
- 如 gif 所示，我想每 2 秒移動點四次并回傳
- 重復次數可能會有所不同（
4 times may vary） - 但影片應該
infinitely像 gif 一樣出現 - 沒有像影片一樣的幻燈片
我嘗試過的：
.carousel__navigation-buttoni {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
background-color: white;
background-clip: content-box;
border: 0.25rem solid transparent;
border-radius: 50%;
font-size: 0;
/*margin-left: 3.5rem ;*/
/*transform: translateX(1.75rem);*/
/*either i want to use margin or transform to move but i dont know how to repeat it in animation*/
}
.carousel__navigation-buttonio {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
background-color: transparent;
background-clip: content-box;
border: 0.25rem solid transparent;
font-size: 0;
}
.carousel__navigation-listi,
.carousel__navigation-itemi {
display: inline-block;
}
.carousel__navigationi {
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
body{
background-color:red;
}<aside class="carousel__navigationi">
<ol class="carousel__navigation-listi">
<li class="carousel__navigation-itemi">
<div class="carousel__navigation-buttoni">white button</div>
</li>
<li class="carousel__navigation-itemi">
<div class="carousel__navigation-buttonio">empty</div>
</li>
<li class="carousel__navigation-itemi">
<div class="carousel__navigation-buttonio">empty</div>
</li>
<li class="carousel__navigation-itemi">
<div class="carousel__navigation-buttonio">empty</div>
</li>
</ol>
</aside>uj5u.com熱心網友回復：
檢查這段代碼，你想要這樣：
div{
width:100px;
height:100px;
border-radius:50%;
background:black;
animation:move 4s steps(4, start) infinite;
}
@keyframes move{
0%{
transform:translateX(0);
}
100%{
transform:translateX(200px)
}
}<div></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/419626.html
標籤：
上一篇：如何根據容器的高度從css或javascript生成行號
下一篇：如何僅使用CSS使用曲線表