See the Pen animation-direction by nilgi (@nilgi) on CodePen. animation-direction: normal; // 기본, 생략 animation-direction: reverse; // 역방향 animation-direction: alternate; // 정방향 → 역방향 animation-direction: alternate-reverse; // 역방향 → 정방향 - - - 대부분의 편집기는 앞글자만 입력하면 자동으로 코드를 선택할 수 있습니다. 그러나 이건 공부에 별 도움이 안 됩니다. 가능하면 직접 모두 입력해보는 게 좋습니다. 정말 완벽하게 숙지했다면 빠른 작업을 위해 자동 코드 넣기를 사용하는 게 좋겠지요. 한 번이라도 더 써보아요.

See the Pen animation-interation-count by nilgi (@nilgi) on CodePen. animation-iteration-count: 3; // 3회 반복 animation-iteration-count: infinite; // 무한~~~ 반복

See the Pen animation-delay by nilgi (@nilgi) on CodePen. 다시 보기 : Rerun ▲ animation-delay: s(초) // 지연 시간은 마이너스 값을 가질 수 있다.

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..

See the Pen animation @keyframes % by nilgi (@nilgi) on CodePen. 다시 보기 : Rerun ▲ animation-name: boxc; // 애니메이션 이름 지정 animation-duration: 8s; // 애니메이션 길이 8초 @keyframes boxc{ // 키프레임 이름 0% {background: tomato;} // 위 지정 시간의 0% 지점에 배경 토마토색 25% {background: gold;} // 지정 시간의 25% 지점에 배경 금색 50% {background: #1E90FF;} // 지정 시간의 50% 지점에 배경 파랑색 100% {background: #9400d3;} // 지정 시간의 100% 지점에 배경 보라색 } 이렇게 시..

See the Pen animation by nilgi (@nilgi) on CodePen. 다시 보기 : Rerun ▲ animation-name: abox; // 애니메이션 이름 지정. 마음대로 animation-duration: 7s; // 애니메이션 총 시간(초) @keyframes abox { // *키프레임. 위에서 지정한 이름 form {background: tomato;} // 배경을 토마토색으로 시작해 to {background: gold;} // 금색으로 변한다. }

See the Pen transition 속기 by nilgi (@nilgi) on CodePen. transition: property(속성), duration(시간), timing-function(속도), delay(지연); transition: width 2s ease-in 1s;

See the Pen transition+transform by nilgi (@nilgi) on CodePen. 전환과 변형을 같이 쓰는 방법 .box { transition: width 2s, height 2s, transform 3s; // 전환에 변형 시간을 걸어주고 } .box:hover { width: 200px; height: 200px; transform: rotate(360deg); // 마우스hover에 변형값을 넣어준다. }

See the Pen transition-delay by nilgi (@nilgi) on CodePen. transition-delay는 말 그대로 전환에 지연시간을 추가하는 값이다. transition-delay: 1s; // 전화의 시작과 끝에 지연 시간 1초 추가

See the Pen transition-timing-function by nilgi (@nilgi) on CodePen. • transition-timing-function: linear; // 시작부터 끝가지 똑같은 속도 • transition-timing-function: ease; / (기본값) 느림 - 빠름 - 느림 • transition-timing-function: ease-in; / 느린 시작 • transition-timing-function: ease-out; / 느린 끝내기 • transition-timing-function: ease-in-out; / 시작과 끝을 느리게, 기본값 ease와 조금 헷갈리는데 여기는 빠름이 없다.