웹코딩 배우기/· CSS140 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. transition 속기 See the Pen transition 속기 by nilgi (@nilgi) on CodePen. transition: property(속성), duration(시간), timing-function(속도), delay(지연); transition: width 2s ease-in 1s; 2021. 8. 26. transition+transform 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에 변형값을 넣어준다. } 2021. 8. 24. transition-delay 전환 지연 See the Pen transition-delay by nilgi (@nilgi) on CodePen. transition-delay는 말 그대로 전환에 지연시간을 추가하는 값이다. transition-delay: 1s; // 전화의 시작과 끝에 지연 시간 1초 추가 2021. 8. 20. transition-timing-funcion 전환 속도 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와 조금 헷갈리는데 여기는 빠름이 없다. 2021. 8. 17. transition 간단한 실습 See the Pen transition 실습1 by nilgi (@nilgi) on CodePen. .box1 { width: 200px; // 가로: 200 height: 35px; // 세로: 35 overflow: hidden; // 영역을 넘어서는 내용: 숨김 transition: width 4s, height 3s; // 전환: 가로 4초, 세로 3초 } .box1:hover { // .box1에 마우스를 올렸을 때 width: 350px; // 가로: 350 height: 270px; // 세로: 270 } 2021. 8. 13. 이전 1 ··· 4 5 6 7 8 9 10 ··· 13 다음
