인프런 커뮤니티 질문&답변
작성한 질문수
에니메이션 효과 질문
20.04.07 22:02 작성
·
188
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;
}
`;
답변 3
0
0
toby0806
질문자
2020. 04. 08. 16:56
제가 딱 원하던대로 구현이 되었습니다!!정말 감사합니다ㅠㅠㅠㅠ
에니메이션은 알다가도 잘 모르겠네요..ㅋㅋㅋㅋ
그리고 Flex와 Grid 강의도 잘 보고 있습니다!항상 좋은 강의 해주셔서 감사드려요~
0
1분코딩
지식공유자
2020. 04. 08. 15:28
아래 코드처럼 해보세요~
마우스를 올리고 있는 동안만 애니메이션이 실행되도록 했습니다.
<!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>