웹코딩 배우기/· CSS140 animation 속기 See the Pen animation 속기 by nilgi (@nilgi) on CodePen. animation-name: 이름; animation-duration: 시간(s); animation-timing-function: 속도; animation-delay: 지연시간(s); animation-iteration-count: 반복; animation-direction: 방향; animation: 이름 시간 속도 지연 반복 방향; 2021. 9. 14. animation-fill-mode 키프레임 지정 See the Pen animation-fill-mode by nilgi (@nilgi) on CodePen. animation-fill-mode: forwards; // 마지막 키프레임을 유지하고 마친다. animation-fill-mode: backwards; // 지연시간동안 첫번째 키프레임을 보여준다. animation-fill-mode: both; // 시작은 첫번째 키프레임, 끝은 마지막 키프레임을 적용하고 유지한다. 2021. 9. 14. animation- timing-function 애니메이션 속도 See the Pen animation-timing-function by nilgi (@nilgi) on CodePen. animation-timing-function: linear; // 같은 속도 animation-timing-function: ease; // 느림 - 빠름 - 느림 (기본값) animation-timing-function: ease-in; // 느리게 시작 animation-timing-function: ease-out; // 느리게 끝내기 animation-timing-function: ease-in-out; // 느리게 시작 느리게 끝내기, ease 처럼 중간에 빠름 없음. 2021. 9. 10. animation-direction / 방향 See the Pen animation-direction by nilgi (@nilgi) on CodePen. animation-direction: normal; // 기본, 생략 animation-direction: reverse; // 역방향 animation-direction: alternate; // 정방향 → 역방향 animation-direction: alternate-reverse; // 역방향 → 정방향 - - - 대부분의 편집기는 앞글자만 입력하면 자동으로 코드를 선택할 수 있습니다. 그러나 이건 공부에 별 도움이 안 됩니다. 가능하면 직접 모두 입력해보는 게 좋습니다. 정말 완벽하게 숙지했다면 빠른 작업을 위해 자동 코드 넣기를 사용하는 게 좋겠지요. 한 번이라도 더 써보아요. 2021. 9. 10. animation-iteration-count / 반복 See the Pen animation-interation-count by nilgi (@nilgi) on CodePen. animation-iteration-count: 3; // 3회 반복 animation-iteration-count: infinite; // 무한~~~ 반복 2021. 9. 3. animation-delay 애니메이션 시간 지연 지키기 See the Pen animation-delay by nilgi (@nilgi) on CodePen. 다시 보기 : Rerun ▲ animation-delay: s(초) // 지연 시간은 마이너스 값을 가질 수 있다. 2021. 9. 3. 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.. 2021. 8. 31. animation @keyframe %% 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% 지점에 배경 보라색 } 이렇게 시.. 2021. 8. 31. CSS animation See the Pen animation by nilgi (@nilgi) on CodePen. 다시 보기 : Rerun ▲ animation-name: abox; // 애니메이션 이름 지정. 마음대로 animation-duration: 7s; // 애니메이션 총 시간(초) @keyframes abox { // *키프레임. 위에서 지정한 이름 form {background: tomato;} // 배경을 토마토색으로 시작해 to {background: gold;} // 금색으로 변한다. } 2021. 8. 27. 이전 1 ··· 5 6 7 8 9 10 11 ··· 16 다음
