<body>
<h1>트랜지션</h1>
<p>시간에 따라 웹 요소의 스타일 속성이 조금씩 바뀌는 것을 의미한다.</p>
<h3>트랜지션 진행 시간 지정하기</h3>
<div class="tran1"></div>
<hr>
<h3>트랜지션 진행별 시간 설정하기</h3>
<div class="tran2"></div>
<hr>
<h3>트랜지션 진행별 속도 지정하기</h3>
<p>transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cublic-bezier(n, n, n, n)</p>
<label>시작: </label><input type="checkbox">
<p>linear</p>
<div class="tran tran3"></div>
<p>ease</p>
<div class="tran tran4"></div>
<p>ease-in</p>
<div class="tran tran5"></div>
<p>ease-out</p>
<div class="tran tran6"></div>
<p>ease-in-out</p>
<div class="tran tran7"></div>
<hr>
<h3>트랜지션 시간 지연하기</h3>
<div class="tran8"></div>
</body>
</html>
＊트랜지션 진행 시간 지정하기
#1_ 기본 설정
.tran1{
width: 100px;
height: 100px;
background: red;
border: 1px solid black;
transition-duration: 2s; << 트랜지션이 진행되는 시간을 지정하는 속성
}
#2_ 마우스 오버했을 때
.tran1:hover{
background: yellow;
}
＊트랜지션 진행별 시간 설정하기
#1_ 기본 설정
.tran2{
width: 100px;
height: 100px;
background: red;
border: 1px solid black;
transition-property: background-color, transform, width, height;
transition-duration: 2s, 3s, 1s, 10s;
}
#2_ 마우스 오버했을 때
.tran2:hover{
width: 200px;
height: 200px;
transform: rotateZ(180deg);
background: yellow;
}
transition-property: 트랜지션을 적용할 속성을 선택할 때 사용되며, 여러개를 선택할 때에는 ,로 구분한다.
transition-duration: 트랜지션이 진행되는 시간을 지정할 때 사용되며 여러개를 선택할 때에는 ,로 구분하고 property 값과 1:1로 대응하게 작성한다.
＊트랜지션 진행별 속도 지정하기
#1_ 기본 설정
.tran{
width: 100px;
height: 100px;
background: red;
border: 1px solid black;
transition-duration: 10s;
}
#2_ 체크박스 체크했을 때 tran 클래스의 지정된 transform이 실행된다.
input:checked ~ .tran{
background: yellow;
width: 100%;
}
#3_ 트랜지션이 진행되는 구간별로 시간을 지정하는 속성
.trans3{
transition-timing-function: linear;
}
.trans4{
transition-timing-function: ease;
}
.trans5{
transition-timing-function: ease-in;
}
.trans6{
transition-timing-function: ease-out;
}
.trans7{
transition-timing-function: ease-in-out;
}
＊cublic-bezier(n, n, n, n)
http:// cublic-bezier.com/ : 원하는 곡선을 만들어서 전달한다.
＊트랜지션 시간 지연하기
#1_ 기본 설정
.tran8{
width: 100px;
height: 100px;
background: red;
border: 1px solid black;
transition: all 5s ease-in 2s; << 5초동안 변하도록 설정되어 있지만 처음 2초간은 딜레이가 걸려서 변하지 않는다.
}
transition: 트랜지션 속성 값을 한번에 지정할 수 있는 속성
선택자 { transition : property duration timing-function delay; }
#2_ 마우스 오버했을 때
.tran8:hover{
transform: rotateZ(180deg);
background: yellow;
}
'KH 정보교육원 > CSS CLASS' 카테고리의 다른 글
| 28. 애니메이션 실습 (0) | 2020.05.07 |
|---|---|
| 27. 애니메이션 (0) | 2020.05.07 |
| 25. 변형 실습 문제 (0) | 2020.05.06 |
| 24. 변형 3_ (0) | 2020.05.06 |
| 23. 변형 2_ (0) | 2020.05.06 |