타이틀
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.
16_transition
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
1. 개요
요소에 두 가지 상태 사이에 변화를 줄 수 있다.
2. 기본문법
transition: <property> <duration> <timing-function> <delay>;
예시: transition: opacity 300ms ease-in;
3. 속성
| 속성 명 | 초기값 | 설명 |
|---|---|---|
| transition-property | all | 트랜지션 속성 |
| transition-duration | Os | 지속시간 |
| transition-timing-function | ease | 속도변화 지정 |
| transition-delay | Os | 시작 전 지연 시간 지정 |
4. 예제
4.1. 호버된 이미지가 확대되서 보여지는 효과
[미리보기]
1. html 작성
-
-
타이틀
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.
-
타이틀
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.
-
타이틀
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.
-
타이틀
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.
-
타이틀
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, laborum vitae neque labore illum possimus assumenda eos. Saepe modi odio qui asperiores voluptatem ullam autem in, consequuntur eveniet, unde iure.