인프런 커뮤니티 질문&답변
작성한 질문수
animation 질문- 하나의 @keyframes로 특정 이벤트없이 한번, hover이벤트시 한번 적용 방법 문의.
해결된 질문
작성
·
408
·
수정됨
0
animation 질문- 하나의 @keyframes로 특정 유저 이벤트없이 한번, 마우스 hover 이벤트시 한번 적용하는 방법 문의 드립니다.
css 강의 ‘animation 실습’ 강의 40분 전후의 쇼핑몰 배너 애니매이션 코드를 변경해서 아래 코드처럼
/* html 부분 */
<section class="mainBanner">
<h1 class="text">Welcome to my shop</h1>
</section>
/* css 부분 */
.text {
font-size: 42px;
font-weight: 700;
color: white;
text-shadow: 9px 6px 5px rgba(0, 0, 0, 0.5);
animation: titleText 1s ease-in-out;
}
.mainBanner:hover .text {
animation: titleText 1s ease-in-out;
}
@keyframes titleText {
0% {
transform: translateY(70px);
}
92% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}@keyframes에 titleText란 이름으로 정의한 애니메이션을, 페이지 로드시에 1번, 마우스 hover 시 1번 재생시키려고 css를 작성했더니 로드시에만 적용되고 호버시엔 적용이 안되더군요.
그래서 아래처럼 동일 keframes를 복사 붙여넣기 하고 이름만 바꿔서 hover에 적용하였더니 잘되더군요.
{
font-size: 42px;
font-weight: 700;
color: white;
text-shadow: 9px 6px 5px rgba(0, 0, 0, 0.5);
animation: titleText 1s ease-in-out;
}
.mainBanner:hover .text {
animation: titleText2 1s ease-in-out;
}
@keyframes titleText {
0% {
transform: translateY(70px);
}
92% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
@keyframes titleText2 {
0% {
transform: translateY(70px);
}
92% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
이런식의 중복 css가 발생하는 비효율적인 방법말고, 하나의 @keyframes로 특정 유저 이벤트없이 한번, hover이벤트시 한번 적용하는 방법 중 html, css만으로 적용하는 방법이 없을까요?
도움 부탁드립니다~
답변 2
0
안녕하세요! tonawood님!
하나의 이름을 가진 애니메이션은 기본적으로 1 번만 실행되기 때문에 이러한 현상이 발생한 것이랍니다!
해당 문제를 해결하기 위해서는, 해당 애니메이션을 무한히 사용 가능하도록 명령해 주시면 되세요!^^
.mainBanner:hover .text {
animation: titleText 1s ease-in-out;
animation-iteration-count: infinite; // 이 부분을 추가합니다
}-1
안녕하세요, 인프런 AI 인턴이에요.
하나의 @keyframes로 특정 이벤트 없이 한 번, 마우스 hover 이벤트 시 한 번 적용하고 싶으시다면, 다음과 같이 작성하실 수 있습니다.
.text {
font-size: 42px;
font-weight: 700;
color: white;
text-shadow: 9px 6px 5px rgba(0, 0, 0, 0.5);
animation: titleText 1s ease-in-out, hoverTitleText 1s ease-in-out;
}
.mainBanner:hover .text {
animation: hoverTitleText 1s ease-in-out;
}
@keyframes titleText {
0% {
transform: translateY(70px);
}
92% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
@keyframes hoverTitleText {
0% {
/* hover 시 적용할 애니메이션 상태 */
}
100% {
/* hover 시 도달해야 할 애니메이션 상태 */
}
}
위의 코드에서는 text 요소에 hoverTitleText 애니메이션을 추가로 적용했습니다. 이렇게 하면 페이지 로드 시 titleText 애니메이션이 적용되고, 마우스 hover 시 hoverTitleText 애니메이션도 같이 적용됩니다.
참고로, hoverTitleText 애니메이션을 원하는 대로 작성해주시면 됩니다. 예를 들어, 투명도를 조절하거나 배경색을 변경하는 등 여러 가지 스타일 변화를 줄 수 있습니다.
추가로 궁금한 사항이 있으시면 언제든지 물어보세요. 즐거운 코딩되세요!
ai 가 답변 한 것은 2개의 keyframe 사용한 거라서 적절한 답변이 아닌거 같습니다. 제가 한 질문은 한개의 동일 keyframe으로 hover시에도 적용하는 방법을 문의한 것 입니다.
답변 감사합니다.
알려주신 방식으로 적용하니 문제가 있네요.
hover시 애니메이션이 1번만 재생되는게 아니라 당연하게도 무한 반복되네요.
로딩시 한번, 마우스 호버시 한번 씩만 재생되게 하려면 css 중복이 발생하는 방법으로 하든가, 아니면 javascript로 컨트롤 하는 방법을 시도해보든가 하나 보군요.