코딩하는 김딸기
CSS Animation: transform, transition, animation속성 활용 본문
Grid로 만드는 범용 Wrapper Layout Class
/*변수*/
:root{
--wrapper-width:960px;
--wrapper-padding:20px;
}
/* Layouts */
.l_wrapper {
max-width: var(--wrapper-width);
margin: 0 auto;
padding: 0 var(--wrapper-padding);
}
.l_grid_wrapper{
display: grid;
grid-template-columns:
[start]
minmax(var(--wrapper-padding), 1fr)
[wrapper-start]
minmax(0, var(--wrapper-width))
[wrapper-end]
minmax(var(--wrapper-padding),1fr)
[end];
}
.l_grid_wrapper-inside{
grid-column: wrapper-start/end;
}
.l_grid_wrapper
- display: grid;: 이 요소는 그리드 컨테이너로 설정됩니다.
- grid-template-columns:: 그리드 레이아웃의 열 정의입니다. 열의 시작과 끝에 start, end라는 이름을 주어 특정 열 사이에 다른 요소를 배치할 수 있습니다.
grid-template-columns 속성의 구성:
- [start]: 첫 번째 이름이 지정된 라인, 그리드의 시작점입니다.
- minmax(var(--wrapper-padding), 1fr): 최소값으로 --wrapper-padding 변수를 사용하고, 최대값으로 1fr을 사용합니다. 즉, 그리드의 양쪽에 최소 패딩만큼의 공간을 주고, 나머지 공간을 1분할하여 차지합니다.
- [wrapper-start]: 그리드의 콘텐츠가 시작되는 지점입니다.
- minmax(0, var(--wrapper-width)): 콘텐츠가 위치할 중앙 부분의 열입니다. 최소값은 0이고, 최대값은 --wrapper-width 변수에 설정된 값만큼 넓이를 차지합니다.
- [wrapper-end]: 콘텐츠 영역의 끝 지점입니다.
- minmax(var(--wrapper-padding), 1fr): 그리드의 오른쪽 끝 부분입니다. 왼쪽과 마찬가지로 최소 패딩만큼의 공간을 주고, 남는 공간을 1분할하여 차지합니다.
- [end]: 그리드의 끝 지점입니다.
.l_grid_wrapper-inside
- grid-column: wrapper-start/end;: 이 요소는 wrapper-start에서 시작하여 wrapper-end까지의 영역에 배치됩니다. 즉, 그리드의 중앙 영역에 위치하게 됩니다.
요약
이 코드의 목적은 화면의 양쪽에 일정한 패딩을 두고, 콘텐츠를 가운데에 위치시키는 레이아웃을 만들기 위함입니다. --wrapper-padding과 --wrapper-width라는 CSS 변수를 사용하여 패딩과 중앙 콘텐츠 영역의 너비를 제어할 수 있습니다.
Animation, Transition 주요 속성과 활용
transform 속성은 요소를 회전, 크기 조정, 이동 또는 기울이는 등 다양한 변형을 적용할 수 있는 CSS 속성입니다. 이 속성은 애니메이션과 결합될 때, 특히 시각적으로 흥미로운 효과를 만들 수 있습니다.
transform 속성의 주요 기능
- translate(x, y): 요소를 X축과 Y축을 기준으로 이동시킵니다.
- translateX(x): 요소를 X축으로 x만큼 이동.
- translateY(y): 요소를 Y축으로 y만큼 이동.
- rotate(angle): 요소를 지정된 각도만큼 회전시킵니다.
- rotate(45deg): 요소를 45도 회전.
- scale(x, y): 요소의 크기를 X축과 Y축을 기준으로 조정합니다.
- scaleX(x): 요소를 X축으로 x배 확대/축소.
- scaleY(y): 요소를 Y축으로 y배 확대/축소.
- skew(x, y): 요소를 X축과 Y축을 기준으로 기울입니다.
- skewX(x): X축을 기준으로 x만큼 기울임.
- skewY(y): Y축을 기준으로 y만큼 기울임.
- matrix(a, b, c, d, e, f): 변환의 모든 매개변수를 한 번에 설정할 수 있는 메서드입니다. 복잡한 변형에 사용됩니다.
예시
1) 크기 변경 애니메이션 (scale):
.circle {
background-color: white;
width: 300px;
height: 300px;
border-radius: 50%;
margin: 100px auto;
}
.circle img{
transform: scale(1);/*스케일은 중앙정렬효과가 있다*/
transition: transform .4s;/*뱐화시 스무스하게 변화*/
}
.circle:hover img{ /*수도클래스-이미지 클릭시 변화*/
transform: scale(0);
}
.circle img 선택자
- transform: scale(1);: 이미지의 크기를 원래 크기(1배)로 설정합니다. transform: scale(1)은 요소의 크기를 변형하지 않으며, 기본적으로 이미지를 중앙에 정렬하는 효과가 있습니다.
- transition: transform .4s;: transform 속성이 변경될 때 0.4초 동안 부드럽게 애니메이션 효과를 적용합니다. 즉, 이미지 크기가 변화할 때 스무스하게 변하도록 설정한 것입니다.
.circle:hover img 선택자
- transform: scale(0);: 마우스를 .circle 요소 위에 올렸을 때 이미지의 크기를 0으로 축소합니다. 이것은 이미지를 화면에서 사라지게 하는 효과를 줍니다.
- :hover: :hover는 마우스를 요소 위에 올렸을 때 적용되는 CSS의 가상 클래스(수도 클래스)입니다. 이 경우, .circle 요소 위에 마우스를 올리면 그 내부의 이미지가 축소되며, 스무스하게 사라집니다.
요약
이 CSS는 .circle이라는 원형 요소 안에 이미지를 배치하고, 마우스를 원형 요소에 올리면 그 안의 이미지가 부드럽게 사라지는 효과를 구현합니다. 이를 통해 인터랙티브한 사용자 경험을 제공할 수 있습니다.
.circle img{
transform: scale(0.5) skew(10deg);/*transform은 여러개의 항목들이 세트로 해석된다*/
transition: all .4s;/*변화시 스무스하게 변화*/
}
.circle:hover img{ /*hover되었을 때 transform 내용이 통째로 변경*/
transform: scale(0.5) skew(-10deg); /*scale(0.5)를 한번 더 적어줘야 함*/
}
.circle img 선택자
- transform: scale(0.5) skew(10deg);:
- scale(0.5): 이미지의 크기를 원래 크기의 50%로 축소합니다.
- skew(10deg): 이미지를 X축 기준으로 10도 기울입니다.
- transform 속성의 특징: transform 속성은 여러 변환(예: scale, skew, rotate, translate)을 하나의 속성으로 묶어서 적용할 수 있습니다. 이 속성에 지정된 모든 변환은 하나의 세트로 작동하며, 각각의 변환이 독립적으로 적용되는 것이 아니라, 조합된 형태로 적용됩니다.
- transition: all .4s;:
- all: 모든 속성의 변화에 대해 애니메이션 효과를 적용합니다. 즉, transform 뿐만 아니라 다른 속성(예: opacity, background-color)이 변경될 때도 0.4초 동안 부드럽게 변화합니다.
- .4s: 변화가 0.4초 동안 부드럽게 진행되도록 설정합니다.
.circle:hover img 선택자
- transform: scale(0.5) skew(-10deg);:
- :hover: 마우스를 .circle 요소 위에 올렸을 때 적용되는 가상 클래스입니다.
- scale(0.5): 이미지의 크기를 50%로 유지합니다. 이 부분은 처음 상태와 동일하게 설정되어 있습니다.
- skew(-10deg): 이미지를 X축 기준으로 -10도 기울입니다. 이 부분은 마우스를 올리기 전 상태와 반대 방향으로 기울어집니다.
@keyframes fire{ /*fire라는 이름의 애니메이션 생성*/
0%{transform: scale(0.5) skew(10deg);}
100%{transform: scale(0.5) skew(-10deg);}
}
.circle img{
transform-origin: center bottom;
animation-name: fire;
animation-duration: 1s;/*변화시간*/
animation-iteration-count: 5;/*반복횟수*/
animation-direction: alternate;
}
이 CSS 코드는 fire라는 이름의 애니메이션을 정의하고, 이를 이미지에 적용하여 지정된 중심점에서 변형이 일어나고, 1초 동안 애니메이션이 5번 반복되면서 앞뒤로(정방향과 역방향) 진행되는 효과를 구현합니다.
@keyframes fire
- fire라는 이름의 애니메이션을 정의합니다. 이 애니메이션은 요소의 transform 속성을 사용하여 변형을 적용합니다.
- 0% { transform: scale(0.5) skew(10deg); }:
- 애니메이션이 시작될 때(0%) 적용되는 변형입니다.
- scale(0.5): 이미지의 크기를 원래 크기의 50%로 축소합니다.
- skew(10deg): 이미지를 X축 기준으로 10도 기울입니다.
- 100% { transform: scale(0.5) skew(-10deg); }:
- 애니메이션이 끝날 때(100%) 적용되는 변형입니다.
- scale(0.5): 이미지가 여전히 50% 크기를 유지합니다.
- skew(-10deg): 이미지가 X축 기준으로 -10도 기울어집니다.
.circle img
- transform-origin: center bottom;:
- 변형이 시작되는 기준점을 설정합니다. 모든 transform 변형은 이미지의 중앙 하단을 기준으로 적용됩니다.
- animation-name: fire;:
- 이 속성은 .circle img 요소에 fire라는 이름의 애니메이션을 적용합니다.
- animation-duration: 1s;:
- 애니메이션이 1초 동안 재생되도록 설정합니다. 즉, 0%에서 100%까지의 변형이 1초 동안 진행됩니다.
- animation-iteration-count: 5;:
- 애니메이션이 5번 반복되도록 설정합니다.
- animation-direction: alternate;:
- 애니메이션이 정방향(0%에서 100%)으로 진행된 다음, 역방향(100%에서 0%)으로 진행됩니다. alternate 속성은 애니메이션이 반복될 때마다 정방향과 역방향을 교대로 실행하도록 만듭니다.
요약
- 이미지가 중앙 하단을 기준으로 축소된 상태에서 좌우로 기울어지며 흔들리는 애니메이션이 5초 동안, 앞뒤로 교대로 진행됩니다.
회전 애니메이션 (rotate)/ 이동 애니메이션 (translate):
.circle img{
transform: scale(0.5);
transition: all 0.4s;
}
.circle:hover img{
/*작성순서 중요*/
transform: scale(0.5) rotate(360deg) translate(400px);
}
.circle img
- transform: scale(0.5);:
- 이미지의 초기 상태를 설정합니다. 이 속성은 이미지를 원래 크기의 50%로 축소합니다.
- transition: all 0.4s;:
- 모든 속성(transform을 포함한 모든 CSS 속성)의 변화가 0.4초 동안 부드럽게 일어나도록 설정합니다. 즉, 변형이 일어날 때 0.4초 동안 스무스하게 전환됩니다.
.circle:hover img
- transform: scale(0.5) rotate(360deg) translate(400px);:
- 마우스를 .circle 요소 위에 올렸을 때 이미지에 적용되는 변형입니다.
- scale(0.5): 이미지는 여전히 원래 크기의 50%로 유지됩니다.
- rotate(360deg): 이미지는 360도 회전합니다. 즉, 한 바퀴를 완전히 돌게 됩니다.
- translate(400px): 이미지는 X축(수평 방향)으로 400픽셀 이동합니다. 이 속성은 scale과 rotate 변형이 적용된 후에 적용됩니다.
- 작성순서 중요: transform 속성의 변형들은 작성된 순서대로 차례로 적용됩니다. 예를 들어, 먼저 scale(0.5)가 적용되고, 그 다음 rotate(360deg), 마지막으로 translate(400px)가 적용됩니다. 이 순서에 따라 변형이 이루어지므로, 변형의 최종 결과는 순서에 따라 달라질 수 있습니다.
요약
- 초기 상태: 이미지는 원래 크기의 50%로 축소된 상태입니다.
- 호버 상태: 마우스를 원형 요소 위에 올리면, 이미지는 0.4초 동안 스무스하게 50% 크기를 유지하면서 360도 회전하고, 수평으로 400픽셀 이동합니다.
- 변형 순서의 중요성: transform 속성의 변형은 순서대로 적용되므로, 각 변형이 순서에 따라 차례로 작동합니다. 이는 최종적인 변형 결과에 영향을 미칩니다.
@keyframes wind{
0%{background-position-x: 0;}
100%{background-position-x: -1000px;}
}
@keyframes spin{ /*fire라는 이름의 애니메이션 생성*/
0%{transform: scale(0.5) rotate(0);}
100%{transform: scale(0.5) rotate(360deg);}
}
.circle {
background-image: url(images/wind.png);
animation-name: wind;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.circle img{
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
이 CSS 코드는 두 가지 애니메이션 효과를 정의하여 .circle 요소와 그 안에 있는 이미지에 각각 적용합니다. 하나는 배경 이미지가 수평으로 이동하는 "wind" 애니메이션이고, 다른 하나는 이미지가 회전하는 "spin" 애니메이션입니다. 각 부분을 해석하고 문법을 설명해 보겠습니다.
@keyframes wind
- 0% { background-position-x: 0; }: 애니메이션의 시작점에서 배경 이미지의 X축 위치를 0으로 설정합니다.
- 100% { background-position-x: -1000px; }: 애니메이션의 끝점에서 배경 이미지의 X축 위치를 -1000px로 설정합니다. 이로 인해 배경 이미지가 수평으로 1000픽셀만큼 왼쪽으로 이동하게 됩니다.
@keyframes spin
- 0% { transform: scale(0.5) rotate(0); }: 애니메이션의 시작점에서 이미지의 크기를 원래 크기의 50%로 축소하고, 회전을 0도로 설정합니다.
- 100% { transform: scale(0.5) rotate(360deg); }: 애니메이션의 끝점에서 이미지가 360도 회전합니다. 이때 이미지의 크기는 50%로 유지됩니다.
.circle 클래스
- background-image: url(images/wind.png);: .circle 요소에 배경 이미지를 설정합니다. 이 이미지가 애니메이션을 통해 움직이게 됩니다.
- animation-name: wind;: "wind" 애니메이션을 .circle 요소에 적용합니다.
- animation-duration: 1.4s;: 애니메이션이 1.4초 동안 실행됩니다.
- animation-iteration-count: infinite;: 애니메이션이 무한히 반복됩니다.
- animation-timing-function: linear;: 애니메이션이 일정한 속도로(선형으로) 실행되도록 설정합니다. 즉, 가속이나 감속 없이 일정한 속도로 배경 이미지가 움직입니다.
.circle img 클래스
- animation-name: spin;: "spin" 애니메이션을 이미지에 적용합니다.
- animation-duration: 2s;: 애니메이션이 2초 동안 실행됩니다.
- animation-iteration-count: infinite;: 애니메이션이 무한히 반복됩니다.
- animation-timing-function: linear;: 일정한 속도로 이미지가 회전하도록 설정합니다.
요약 및 문법 설명
- @keyframes: 애니메이션의 각 프레임에서 어떻게 스타일이 변해야 하는지를 정의합니다. 0%는 애니메이션의 시작점, 100%는 끝점을 나타냅니다.
- 애니메이션 속성들:
- animation-name: 적용할 애니메이션의 이름을 지정합니다.
- animation-duration: 애니메이션이 한 번 재생되는 데 걸리는 시간을 설정합니다.
- animation-iteration-count: 애니메이션이 반복되는 횟수를 지정합니다. infinite는 무한 반복을 의미합니다.
- animation-timing-function: 애니메이션의 속도 변화를 설정합니다. linear는 일정한 속도를 의미합니다.
애니메이션의 동작
- .circle 요소: 배경 이미지가 1.4초 동안 왼쪽으로 1000픽셀 이동하는 애니메이션이 무한히 반복됩니다.
- .circle img 이미지: 이미지는 2초 동안 360도 회전하는 애니메이션이 무한히 반복됩니다.
이 CSS는 정적인 요소에 역동적인 시각 효과를 추가하여, 무한히 반복되는 애니메이션을 통해 역동적인 화면을 구현합니다.
.circle {
background-image: url(images/wind.png);
animation-name: wind;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: paused;
}
.circle img {
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: inherit;
}
.circle:hover {
animation-play-state: running;
}
이 CSS 코드는 .circle 요소와 그 안에 포함된 이미지에 애니메이션을 적용하고, 호버 상태에서 애니메이션을 제어하는 방법을 정의합니다. 아래는 각 부분에 대한 해석입니다:
.circle
- background-image: url(images/wind.png);:
- .circle 요소의 배경 이미지로 images/wind.png를 설정합니다. 이 이미지는 애니메이션의 배경으로 사용됩니다.
- animation-name: wind;:
- wind라는 이름의 애니메이션을 .circle 요소에 적용합니다. 이 애니메이션은 @keyframes wind에서 정의된 내용에 따라 배경 이미지가 움직이게 됩니다.
- animation-duration: 1.4s;:
- 애니메이션이 한 사이클을 완료하는 데 1.4초가 걸리도록 설정합니다.
- animation-iteration-count: infinite;:
- 애니메이션이 무한히 반복되도록 설정합니다.
- animation-timing-function: linear;:
- 애니메이션의 속도가 일정하게 유지되도록 설정합니다. 즉, 애니메이션이 가속이나 감속 없이 균일한 속도로 진행됩니다.
- animation-play-state: paused;:
- 애니메이션이 기본적으로 멈춰있는 상태로 설정됩니다. .circle 요소에 마우스를 올리지 않으면 애니메이션이 실행되지 않습니다.
.circle img
- animation-name: spin;:
- spin이라는 이름의 애니메이션을 이미지에 적용합니다. 이 애니메이션은 @keyframes spin에서 정의된 내용에 따라 이미지가 회전하게 됩니다.
- animation-duration: 2s;:
- 애니메이션이 한 사이클을 완료하는 데 2초가 걸리도록 설정합니다.
- animation-iteration-count: infinite;:
- 애니메이션이 무한히 반복되도록 설정합니다.
- animation-timing-function: linear;:
- 애니메이션의 속도가 일정하게 유지되도록 설정합니다.
- animation-play-state: inherit;:
- animation-play-state 속성을 부모 요소인 .circle에서 상속받습니다. 따라서 .circle 요소의 애니메이션 상태(멈춤 또는 실행)에 따라 이미지의 애니메이션 상태도 결정됩니다.
.circle:hover
- animation-play-state: running;:
- .circle 요소에 마우스를 올렸을 때(:hover 상태), animation-play-state을 running으로 설정하여 애니메이션이 실행되도록 합니다. 즉, .circle 요소의 배경 이미지 애니메이션이 실행됩니다.
요약
- 기본 상태:
- .circle 요소와 그 안의 이미지 애니메이션은 기본적으로 멈춰 있습니다(paused).
- .circle 요소의 배경 애니메이션(wind)은 기본적으로 멈춰 있으며, .circle img의 회전 애니메이션(spin)도 멈춰 있습니다.
- 호버 상태:
- 사용자가 .circle 요소에 마우스를 올리면(:hover), 배경 이미지 애니메이션이 재생됩니다(running).
- 이미지의 회전 애니메이션은 부모 요소인 .circle의 애니메이션 상태에 따라 자동으로 재생되거나 멈추게 됩니다.
이 CSS는 .circle 요소와 그 내부의 이미지에 각각의 애니메이션을 적용하고, 호버 상태에서 애니메이션이 실행되도록 설정하여 상호작용 시 애니메이션 효과를 제공합니다.