Apply CSS Moving Transition to element with `transform` property - css

Question

I want to apply CSS move transition to element with transform property.
Before transition:
<ul class="list">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
After transition:
<ul class="list">
<li>two</li>
<li>three</li>
<li>one</li>
</ul>
CSS:
.list > li {
transform: skewX(15deg);
transform-origin: bottom left;
}
I tried to apply transition: transform 1s, then skewX was also reset and re-applied.
Example video here: https://youtu.be/n3qC3uny5uM
How can I apply transition to only movement, not shape transform?

Answer 1

You can do something like following using CSS Animation.
.container {
background: #f7f8f9;
display: flex;
}
.container div {
width: 40px;
height: 100px;
background: #fcc700;
margin: 0 4px;
animation: spin linear 1.2s;
// animation: spin linear 1s infinite;
}
#keyframes spin {
from {
transform: translateX(-50px);
}
to {
transform: translateX(50px) skewX(-15deg);
}
}
<div class="container">
<div>A</div>
<div>B</div>
</div>