<div class="box">
  <div class="inner-box inner-kaiten-sushi">
    <span class="sushi kaiten-sushi">๐Ÿฃ</span>
  </div>
</div>
body {
    font-size: 32px;
}
.box {
    border: 2px solid #000;
    width: 300px;
    height: 300px;
    position: relative;
    margin: 3px;
    overflow: hidden;
}
.inner-box {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.sushi {
    position: absolute;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.kaiten-sushi {
    animation-name: kaiten-sushi;
    animation-duration: 5s;
}
.inner-kaiten-sushi {
    animation-name: inner-kaiten-sushi;
    animation-duration: 5s;
}

@keyframes inner-kaiten-sushi  {
    from { left: 0; transform: rotate(0deg); }
    30% { left: calc(100% - 100px); transform: rotate(0deg); }
    50% { left: calc(100% - 100px); transform: rotate(180deg); }
    80% { left: 0; transform: rotate(180deg); }
    to { left: 0; transform: rotate(360deg); }
}
@keyframes kaiten-sushi  {
    from { transform: rotate(0deg); }
    30% { transform: rotate(0deg); }
    50% { transform: rotate(-180deg); }
    80% { transform: rotate(-180deg); }
    to { transform: rotate(-360deg); }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.