지난 시간 transform에 대해 다뤄보았고,
예제를 통해 transform의 속성에 대해 알아보았다.
오늘은 transform에 더불어 transition효과에 대해 다뤄보겠다.
transform과 transition의 차이
transform이란?
요소의 모양, 위치, 크기 등을 변형하는 데 사용된다.
- 이동(translate), 회전(rotate), 크기조절(scale), 기울이기(skew) 등의 속성을 통해 변형을 가능하게 한다.
- 위와 같은 속성들은 요소의 기존 위치를 기준으로 적용된다.
- transform은 즉시 적용되며, 변형된 상태를 원래 상태로 복원하기 위해서는 다시 적용해야 한다.
- 주로 CSS의 hover나 클릭과 같은 이벤트에 따라 요소의 모양이나 위치를 변환하는 데 사용된다.
transition이란?
요소의 속성 변화에 생동감 있는 애니메이션 효과를 부여하는 데 사용된다.
- 동작 시간, timing, 지연 시간 등을 정의한다.
- 주로 상태 변화에 반응하여 요소의 속성을 변경할 때 사용된다.
- 예를 들어, hover상태에서 색상이 변경되거나, 클릭할 때 요소의 크기가 변경될 때 transition을 사용하여 부드러운 변화를 적용할 수 있다.
- transition은 변화 전과 후의 상태 사이를 자연스럽게 이동하도록 만들어준다.
📝요약
transform은 요소의 모양이나 위치를 변형시키는 데 사용되고,
즉시 적용되며 다시 원래 상태로 돌리려면 다시 적용해야 한다.
반면에 transition은 요소의 상태 변화에 부드러운 애니메이션 효과를 부여하는 데 사용되며,
주로 요소의 속성이 변화할 때 적용된다.
1. transition
요소의 상태 변화에 부드러운 애니메이션 효과를 부여하는 데 사용된다.
이는 기존 transform으로 딱딱한 상태변화를 보여줬다면,
transition은 이에 더불어 생동감을 주도록 효과를 넣어주는 것이다.
주로 hover상태나 클릭 등 사용자 상호작용에 반응하는 요소들에 적용된다.
1️⃣transition-property
: 변환시키고 싶은 속성을 선택한다.
기본값은 all로 ,(쉼표)를 통하여 변환시키고 싶은 속성들을 구분한다.
💻CSS 코드
.box:hover{
transiton-property : scale, skew;
}
2️⃣transition-duration
: 애니메이션의 지속시간(총 시간)을 지정한다.
1s, 1ms 등으로 속성값을 지정한다.
💻CSS 코드
.box:hover{
transiton-duration : 1s;
}
3️⃣transition-delay
: 얼마동안 지연 후(쉬고) 변환을 시작할지를 지정한다.
기본값은 0s으로 지연 없이 시작된다.
s, ms등의 시간단위를 사용하여 속성값을 지정한다.
💻CSS 코드
.box:hover{
transiton-delay : 1s;
}
4️⃣transition-timing-function
: 시간함수로 애니메이션의 진행 속도를 지정한다.
기본값은 ease로 처음에는 빠르게 시작하여
후반에는 천천히 끝나도록 설정한다.
ease-in, linear 등과 같은 키워드로 값을 조절할 수 있고,
cubic-bezier(n, n, n, n)을 이용하여 속성값을 조절할 수 있다.
💻CSS 코드
.box:hover{
transition-duration : ease-in;
transition-duration :cubic-bezier(.06,.68,.86,.82);
}
5️⃣transition 단축 속성
: property(속성), duration(지속시간) timing-function(시간함수), delay(지연시간)
순으로 값을 넣어서 정의한다.
❗주의❗
시간값이 2개(지속시간, 지연시간)가 존재하기 때문에 주의해서 사용해야 한다.
시간값 1개 : duration
시간값 2개 : duration | delay
💻CSS 코드
.box:hover{
transition : all 1s linear 2s;
transition : background 2s, scale 2s linear 4s;
}
📝예제📝
상자에 마우스를올려놓았을 때
크기, 회전율, 투명도 변경하기
💻HTML코드
<body>
<h1>CSS Transform</h1>
<div class="box-container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
<div class="box">E</div>
</div>
</body>
💻CSS 코드 transform
.box-container{
display: flex;
}
.box{
width: 100px;
height: 100px;
border: 2px solid black;
background: rgba(248, 66, 211, 0.937);
opacity: 1; /* 초기 투명도 */
}
.box:hover{
transform: scale(1.5) rotate(-15deg);
transform-origin: 100% 100%;
opacity: 0.5; /* 호버 시 투명도 변경 */
}
💻CSS 코드 transition
.box-container{
display: flex;
}
.box{
width: 100px;
height: 100px;
border: 2px solid black;
background: rgba(248, 66, 211, 0.937);
opacity: 1; /* 초기 투명도 */
transition: 0.5s ease; /* transition추가 */
}
.box:hover{
transform: scale(1.5) rotate(-15deg);
transform-origin: 100% 100%;
opacity: 0.5; /* 호버 시 투명도 변경 */
}
💻결과
이상으로 transition 속성에 대해 다뤄보았다.
마지막은 animation 속성에 다뤄볼 예정인데
포스팅이 너무 귀찮아서 언제 할지 모르겠다..
그럼 오늘도 파이팅!!
📚 참고 자료
1️⃣ MDN transition
2️⃣ cubic-bezier 값 조절하기
📚지난 포스팅 리뷰하기
transform 속성
: 요소에 회전, 크기 조절, 기울기 등의 효과를 부여하는 것으로
active(클릭), hover(마우스) 등의 가상 선택자로 효과를 적용할 요소를 선택해야 효과가 적용된다.
1️⃣transform-origin(x,y) : transform을 적용할 때 어디를 기준점으로 할 것인가를 정의한다.
2️⃣scale(x, y) : 크기를 조절하는 것
3️⃣rotate(각도) : 입력한 만큼 회전시키는 것
4️⃣skew(x, y) : x축과 y축을 기준으로 입력한 각도만큼 비트는 것
5️⃣translate(x, y) : x축, y축 방향으로 요소가 이동하는 것
'Study with Yedol > CSS' 카테고리의 다른 글
| CSS 애니메이션(Animation) 속성과 키프레임(keyframes) (0) | 2024.02.04 |
|---|---|
| CSS transform 속성 적용 방법 (0) | 2024.01.24 |
| CSS cursor 속성 적용 방법 (0) | 2024.01.19 |
| CSS Grid Layout 아이템 적용 속성 (0) | 2024.01.14 |
| CSS Grid layout 컨테이너 속성 (0) | 2024.01.12 |
