-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
animation 질문- 하나의 @keyframes로 특정 이벤트없이 한번, hover이벤트시 한번 적용 방법 문의.
23.09.18 17:54 작성 23.09.18 18:43 수정 조회수 297
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만으로 적용하는 방법이 없을까요?
도움 부탁드립니다~
답변을 작성해보세요.
0
노원두
지식공유자2023.09.27
안녕하세요! tonawood님!
하나의 이름을 가진 애니메이션은 기본적으로 1 번만 실행되기 때문에 이러한 현상이 발생한 것이랍니다!
해당 문제를 해결하기 위해서는, 해당 애니메이션을 무한히 사용 가능하도록 명령해 주시면 되세요!^^
.mainBanner:hover .text {
animation: titleText 1s ease-in-out;
animation-iteration-count: infinite; // 이 부분을 추가합니다
}
-1
인프런 AI 인턴
2023.09.20
안녕하세요, 인프런 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
애니메이션을 원하는 대로 작성해주시면 됩니다. 예를 들어, 투명도를 조절하거나 배경색을 변경하는 등 여러 가지 스타일 변화를 줄 수 있습니다.
추가로 궁금한 사항이 있으시면 언제든지 물어보세요. 즐거운 코딩되세요!
박진화
질문자2023.09.20
ai 가 답변 한 것은 2개의 keyframe 사용한 거라서 적절한 답변이 아닌거 같습니다. 제가 한 질문은 한개의 동일 keyframe으로 hover시에도 적용하는 방법을 문의한 것 입니다.
답변 2