CSS 이동하는 사각형

See the Pen animation 이동 by nilgi (@nilgi) on CodePen.

다시 보기 : Rerun ▲

 

position: relarive; // box에 지정 위치를 걸어주고

 

.box {
    animation-name: boxc;
    animation-duration: 8s;
}

@keyframes boxc{
    0% {background: tomato; left: 0px; top: 0px;} // 이동할 위치를 잡아준다.
    25% {background: gold; left: 120px; top: 0px;}
    50% {background: #1E90FF; left: 120px; top: 120px;}
    75% {background: #ff1493; left: 0px; top: 120px;}
    100% {background: #9400d3; left: 0px; top: 0px;}
}

 

- - -

 

하루에 많이 해봤자 원투개 공부하는데 돌아서면 까먹는다. 어쩔~ㅋ 그래서 전날 공부한 내용 꼭 복습 때리고 시작한다. 힘들다. 그래도 재미있다. 신기해 신기해~