transform 속성 + 제공된 함수를 지정하여 애니메이션을 설정할 수 있습니다.

준비

우선은 body 태그내에 이하와 같은 정사각형을 동작의 확인용으로서 작성합니다.
※이번은 style.css 안에 움직임을 알기 쉽게, transition: transform 1.0s 로 1초간에 걸쳐 이동하도록 하고 있습니다.

index.html

<div>
   <div class="target"></div>
</div>

style.css

.target {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: skyblue;
    transition: transform 1.0s; 
}

translate로 이동시켜 보세요

물체의 위치를 ​​이동할 때 사용

style.css

.target {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: skyblue;
    transition: all 1.0s;
    transform: translate(100px, 100px); 
}

transform: translate(x軸(横方向), y軸(縦方向)); 라고 지정하는 것으로 물체를 지정한 위치로 이동시키는 것이 가능.

이번 경우라면 제1 인수(x축)에 100px, 제2 인수에 100px(y축)를 지정하는 것으로,
x축 방향으로 100px, y축 방향으로 100px 이동시킬 수 있습니다.