CSS 애니메이션
이제 프로필을 아래 위로 움직이게 만들어 보겠습니다.
프로필을 위아래로 움직이려면 CSS animation
속성을 사용해야 합니다.
CSS 애니메이션 사용법
선택자 {
animation: 애니메이션명 시간;
}
여기서 선택자
는 애니메이션을 적용하고자 하는 요소를 지정합니다. 애니메이션명
은 미리 정의된 애니메이션의 이름을 뜻하고, 시간
은 애니메이션이 재생되는 시간을 나타냅니다.
CSS에서 애니메이션은 @keyframes
이라는 키워드로 정의합니다. @keyframes
규칙은 애니메이션의 각 단계를 지정합니다.
예를 들어, 다음은 myAnimation
이라는 이름의 애니메이션을 정의하는 코드입니다.
CSS 애니메이션 정의
@keyframes myAnimation {
0% {
/* 애니메이션의 시작 단계 스타일 */
transform: translateY(0); /* 시작 지점에서 translateY(0) 적용 */
}
50% {
/* 애니메이션의 중간 단계 스타일 */
transform: translateY(-20px); /* 50%에서는 translateY(-20px) 적용, 위로 20px 올라감 */
}
100% {
/* 애니메이션의 마지막 단계 스타일 */
transform: translateY(0); /* 100%에서는 translateY(0) 적용, 다시 원래 위치로 돌아옴 */
}
}
box
클래스를 가진 요소에 myAnimation
애니메이션을 2초 동안 재생하도록 설정하려면 다음과 같이 CSS 코드를 작성합니다.
myAnimation CSS 애니메이션 적용
.box {
animation: myAnimation 2s;
}
위의 코드를 사용하면 box
클래스를 가진 요소가 myAnimation
애니메이션을 2초 동안 재생합니다.
CSS의 animation
속성은 요소를 부드럽게 움직이거나 변화시키는 데 사용됩니다. 이를 통해 웹페이지에 다양한 동적 효과를 추가할 수 있습니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!