CSS의 왼쪽에서 슬라이드 인 전환
Jay Singh
2023년2월20일
전환 및 애니메이션을 위한 동작 생성은 CSS3의 혁신 중 하나였습니다. 수년 동안 프런트 엔드 개발자는 JavaScript 또는 Flash 대신 HTML 및 CSS를 사용하여 이러한 상호 작용을 빌드하는 옵션을 요청해 왔습니다.
마우스 오버, 포커스, 활성 또는 대상 지정과 같은 요소의 상태가 변경되면 CSS3 전환을 사용하여 모양과 동작을 수정할 수 있습니다.
CSS3 애니메이션을 사용하면 수많은 키프레임에서 요소의 모양과 동작을 변경할 수 있습니다. 전환을 사용하면 한 상태에서 다른 상태로 이동할 수 있는 반면 애니메이션은 고유한 키프레임을 기반으로 많은 전환 지점을 설정합니다.
이 기사의 왼쪽 전환 예제에서 CSS 슬라이드인을 살펴보겠습니다.
CSS의 왼쪽에서 슬라이드 인 전환
이 예제는 translateX 및 translateY를 사용하여 요소를 A 지점에서 B 지점으로 이동합니다. 번역 기능을 사용하면 평면(x 및 y축)을 가로질러 요소를 이동할 수 있습니다.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Slide-in Transition</title>
</head>
<style>
.element {
width: 200px;
height: 200px;
background: blue;
animation: moveToRight 1s ease-in-out;
animation-delay: 10ms;
}
@keyframes moveToRight {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(500px);
}
}
</style>
<body>
<div class="element"></div>
</body>
</html>