diff --git a/src/pages/Intro.jsx b/src/pages/Intro.jsx
index ae604ab..7110e4c 100644
--- a/src/pages/Intro.jsx
+++ b/src/pages/Intro.jsx
@@ -14,25 +14,16 @@ const fadeOutBackground = keyframes`
const titleMove = keyframes`
from {
- transform: translateY(-50%) translateX(-50%);
- left: 50%;
+ position: absolute;
top: 50%;
- position: fixed;
- }
- to {
- transform: translateY(0) translateX(0);
- position: static;
- }
-`;
-
-const fadeIn = keyframes`
- from {
- opacity: 0;
- transform: scale(0.5);
+ left: 50%;
+ transform: translate(-50%, -50%);
}
to {
- opacity: 1;
- transform: scale(1);
+ position: absolute;
+ top: 50px;
+ left: 100px;
+ transform: translate(0, 0);
}
`;
@@ -68,9 +59,7 @@ const Intro = () => {
-
-
@@ -83,12 +72,16 @@ const Intro = () => {
const S = {
Titleimg: styled.img`
- margin-block: 30px;
+ inherits: false;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
animation: ${titleMove} 2s ease-out 3s forwards;
`,
Background: styled.div`
animation: ${fadeOutBackground} 2s ease-out 3s forwards;
- background-color: #ffe39e; // 초기 배경색 설정
+ background-color: #ffe39e;
width: 100%;
height: 100vh;
position: relative;
@@ -108,12 +101,16 @@ const S = {
`,
Row: styled.div`
display: flex;
+ padding-top: 300px;
justify-content: space-between;
`,
Link: styled(Link)`
+ opacity: 0;
animation: ${appearFromLeft} 1s ease-out 3s forwards;
`,
Link2: styled(Link)`
+ /* display: none; */
+ opacity: 0;
animation: ${appearFromRight} 1s ease-out 3s forwards;
`,
LinkBox: styled.img`