В своей анимации мне нравится использовать трансформацию. Это также возможно сделать со свойством left / right
. Но мне нравится использовать transform
. Мне нужно переместить freeze-loading-bar
на 100% вправо, и это должен быть бесконечный цикл.
Как я могу переместить полосу загрузки вправо на 100% / полностью?
*,
*::before,
*::after {
box-sizing: border-box;
}
.app-view {
height: 200px;
max-width: 300px;
margin: 1rem auto;
background-color: #fff;
box-shadow: -2px 2px 4px 0 #e0e0e0ad, 1px -1px 9px 0 #dddddd2e;
padding: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.freeze-loading {
position: relative;
width: 100%;
height: 5px;
box-shadow: inset 1px 0px 4px 0 #ddd;
/** disual purpose **/
/** overflow: hidden; **/
}
.freeze-loading-bar {
position: absolute;
left: 0;
width: 80px;
height: 100%;
background-color: rgb(0, 132, 255);
animation: freeze-loading-bar 2s linear infinite;
}
@keyframes freeze-loading-bar {
from {
transform: translateX(-100px);
}
to {
transform: translateX(100%);
}
}
<div class="app-view">
<div class="freeze-loading">
<div class="freeze-loading-bar"></div>
</div>
</div>
Свободный перевод вопроса Is it possible to use CSS translateX(100%) to make a moving animation? от участника @Tahazzot.