CSS-Transition
- 시간이 흐르면서 설정된 스타일을 변경하는것
- 자바스크립트를 이용하지 않고도 애니메이션 효과를 낼 수 있음
- transition-property : 속성 값
1. none : 아무 속성도 바뀌지 않음
2. all : 요소의 모든 속성이 트랜지션 대상이 됨
3. 특정 속성명 : 트랜지션을 적용할 속성을 지정, 여러개일 경우 쉼표 구분
적용속성
> 위치속성 : top, left, bottom, right
> 크기속성 : width, height
> 박스속성 : margin, padding
> 테두리 속성 : border-width, border-radius, border-color
> 색상 속성 : color, background-color
> 투명도 속성 : opacity
> 변환속성 : transform
- transition-duration : 시간 지정(초단위)
: 트랜지션이 적용될 시간을 설정
- transition-delay: 시간
: 트랜지션 시작 시간의 지연시간을 설정
: 사용할 수 있는 지연시간은 초나 밀리초
: 기본값은 0s 임
- transition-timing-function
: 트랜지션 효과의 속도를 지정할 수 있음
: 설정 함수명
1. linear : 시작에서 끝까지 똑같은 속도로 진행
2. ease : 처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히
3. ease-in : 트랜지션 시작을 느리게
4. ease-out 트랜션을 느리게 끝냄
5. ease-in-out : 느리게 시작하고 느리게 끝냄
- transition : 위의 4가지를 동시사용, 필수(duration)
: transition: all 2s linear 1s
<!DOCTYPE html>
<html>
<head>
<title> transition </title>
<meta charset="utf-8" />
<style>
#outer > div {
width: 100px; height: 100px;
text-align: center;
padding: 5px;
margin: 5px 10px;
color: white;
background: black;
font-size: 30px;
font-weight: bold;
}
#outer:hover > div {
width: 500px;
}
#outer:hover > .ease { transition: 5s ease; }
#outer:hover > .linear { transition: 5s linear; }
#outer:hover > .ease-in { transition: 5s ease-in; }
#outer:hover > .ease-out { transition: 5s ease-out; }
#outer:hover > .ease-in-out { transition: 5s ease-in-out; }
</style>
</head>
<body>
<div id="outer">
<div class="ease"> ease </div>
<div class="linear"> linear </div>
<div class="ease-in"> ease-in </div>
<div class="ease-out"> ease-out </div>
<div class="ease-in-out"> ease-in-out </div>
</div>
</body>
</html>
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
transition
The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.
developer.mozilla.org