Out of range cubic bezier

by stopsatgreen

HTML

<div class="parent">
    <div class="one"></div>
    <div class="two"></div>
</div>

CSS

.parent {
    border: 1px solid pink;
    height: 200px;
    margin: 0 auto;
    width: 400px;
}
.one, .two {
    background-color: blue;
    height: 50%;
    width: 50px;
    transition: 500ms cubic-bezier(.3,0,1,1);
}
.two {
    background-color: red;
    transition-timing-function: cubic-bezier(.3,0,1,1.5);
}
.parent:hover div {
    transform: translateX(700%);
}
    
}