I set the div to move 50% to the right on the x-axis, but I don’t know the 50% is referenced to what, meaning is it 50% of the width of the section(its parent)? Or 50% of the with of the body?
hi @m7md20091 it is 50% of it self. You can move to center of parent element with custom CSS like eg.
<style>
section {
position: relative;
width: 50%;
height: 100px;
background-color: #c3c3c3;
display: flex;
margin: 0 auto;
}
.box {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
/* Create the animation... */
@keyframes slide-in {
from {
left: 0%;
}
to {
left: 50%;
transform: translateX(-50%);
}
}
/* ...and then apply it: */
.box {
animation: slide-in 1400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation-fill-mode: forwards;
}
</style>
where in your section give a div block class box