에니메이션 효과 질문

인터랙티브 웹 개발 제대로 시작하기

Animation 1

작성

195

안녕하세요. 혼자서 에니메이션 구현하다가 모르는 부분이 있어서 질문을 드리게 되었습니다.

의도사항 : 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/CSS javascript

답변 3

1분코딩

지식공유자

해결이 되어 다행이네요! ㅎㅎ 감사합니다.

toby0806

질문자

제가 딱 원하던대로 구현이 되었습니다!!정말 감사합니다ㅠㅠㅠㅠ

에니메이션은 알다가도 잘 모르겠네요..ㅋㅋㅋㅋ

그리고 Flex와 Grid 강의도 잘 보고 있습니다!항상 좋은 강의 해주셔서 감사드려요~

1분코딩

지식공유자

아래 코드처럼 해보세요~
마우스를 올리고 있는 동안만 애니메이션이 실행되도록 했습니다.

<!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>

인프런 커뮤니티 질문&답변

에니메이션 효과 질문