Inflearn Community Q&A
asked
에니메이션 효과 질문
Written on
·
266
0
안녕하세요. 혼자서 에니메이션 구현하다가 모르는 부분이 있어서 질문을 드리게 되었습니다.
의도사항 : 0.2초 동안 위에서 아래로 떨어지는 에니메이션 진행 후, 3초 기다렸다가 다시 0.2초 동안 올라가는 에니메이션
결과 : 0.2초 3초 동안 설정한 내용이 적용되지 않고 에니메이션이 동작
어떻게 하면 특정 구간에서 3초 동안 기다리게 할 수 있을까요??ㅠㅠㅠㅠ
const NameAni = keyframes`
0% {
transform:translateY(-50px);
opacity:0.2;
}
50% {
transform:translateY(0);
opacity:1;
animation-duration:2s;
}
100% {
transform:translateY(-50px);
opacity:0.2;
}`;
const Layout = styled.div`
h3 {
animation: ${NameAni} 3s 0.4s linear forwards;
}
`;
인터랙티브-웹HTML/CSSjavascript
Quiz
CSS 애니메이션과 트랜지션의 가장 큰 차이점은 무엇일까요?
하드웨어 가속 사용 여부
키프레임을 통한 다단계 변화 정의
요소의 회전 가능 여부
마우스 호버 이벤트 트리거 가능 여부
Answer 3
0
0
toby0806
Questioner
제가 딱 원하던대로 구현이 되었습니다!!정말 감사합니다ㅠㅠㅠㅠ
에니메이션은 알다가도 잘 모르겠네요..ㅋㅋㅋㅋ
그리고 Flex와 Grid 강의도 잘 보고 있습니다!항상 좋은 강의 해주셔서 감사드려요~
0
studiomeal
Instructor
아래 코드처럼 해보세요~
마우스를 올리고 있는 동안만 애니메이션이 실행되도록 했습니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@keyframes moving {
0% {
transform:translateY(-50px);
opacity:0.2;
}
6% {
transform:translateY(0);
opacity:1;
}
94% {
transform:translateY(0);
opacity:1;
}
100% {
transform:translateY(-50px);
opacity:0.2;
}
}
.box {
width: 100px;
height: 100px;
background: red;
transform:translateY(-50px);
opacity:0.2;
}
.box:hover {
animation: moving 3.4s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>