Bezel animation on https://demos.mklacroix.com/configurable-watch/

watch-bezel-animation.css

.mkl_pc .mkl_pc_container .mkl_pc_viewer .mkl_pc_layers img.bezel:not(.active) {
    transform: translateX(calc(-50% - 300px)) translateY(-50%);
}

.mkl_pc .mkl_pc_container .mkl_pc_viewer .mkl_pc_layers img.bezel.active ~ img.bezel:not(.active) {
    transform: translateX(calc(-50% + 300px)) translateY(-50%);
}

In order to create the animation as seen on this demo, add the CSS class bezel to the layer, and use the above CSS.

What it does:

• a non-active image moves left
• non-active images after the active image move to the right
• (The active image doesn't have any position change)