|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 07</title>
<style type="text/css">
/**/
div.box {
background-color:red;
width:200px;
height:200px;
color:white;
/*transition-property - 전환 효과를 적용할 대상 속성을 지정*/
/*속성값*/
/*none - 전환 효과를 지정하지 않음*/
/*all - 모든 속성을 전환 효과 대상으로 지정*/
/*원하는 속성만 지정할려면 , 기호로 구분하여 복수의 속성값을 지정*/
transition-property:background-color, color, width; /*변환 효과를 배경색, 글자색, 넓이로 지정*/
/*transition-duration - 전환 효과의 지속 시간을 설정 (속상값으로는 초 단위로 지정)*/
/*property에서 지정한 순서대로 지속 시간을 따로 지정가능*/
transition-duration:5s, 1s, 3s; /*배경을5초, 글자색을 1초, 넓이를 3초의 시간동은 전환*/
/*transition-delay - 전환 효과의 발생을 지연 설정 (속상값으로는 초 단위로 지정)*/
/*property에서 지정한 순서대로 지속 시간을 따로 지정가능*/
transition-delay:1s, 2s, 10s; /*배경을 1초, 글자색을 2초, 넓이를 10초 후에 전환시작*/
}
div.box:hover {
background-color:blue; /*마우스를 올리면 배경을 파랑으로 전환*/
color:green; /*마우스를 올리면 글자색을 초록으로 전환*/
width:300px /*마우스를 올리면 넓이를 300px로 전환*/
}
/*transition-timing-function - 전환 효과의 진행 속도를 설정*/
/*cubic-bezier(p1, p2, p3, p4) - 해당 속성은 값을 구해야 하기 때문에 나중에 공부하자 */
div.line {
padding:10px;
color:white;
border:1px solid black;
width:600px
}
div.line > div.bar {
background-color:blue;
margin-bottom:10px;
width:200px;
transition-property: width;
transition-duration: 1s;
transition-delay:0.5s;
}
div.line:hover > div{
width:400px;
}
div.line > div.bar:nth-child(1){
transition-timing-function:linear; /*처음 속도와 마지막 속도가 일정*/
}
div.line > div.bar:nth-child(2){
transition-timing-function:ease; /*처음에는 속도가 점점 빨라지다가 중간부터 느려짐*/
}
div.line > div.bar:nth-child(3){
transition-timing-function:ease-in /*처음에는 속도가 느리지만 완료될 때가지 점점 빨라짐*/
}
div.line > div.bar:nth-child(4){
transition-timing-function:ease-out; /*처음에는 속도가 빠르지만 완료될 때까지 점점 느려짐*/
}
div.line > div.bar:nth-child(5){
transition-timing-function:ease-in-out; /*처음에는 속도가 느리지만 점점 빨라지다가 다시 점점 느려짐*/
}
/*transition 속성 역시 한번에 설정이 가능하다.*/
/*transition:property duration timing-function delay 순서대로 작성하면 된다.*/
div.all {
background-color:green;
width:200px;
transition:width 1.5s linear 3.5s; /*"넓이"를 "1.5초 후"에 "일정한 속도"로 "3.5초에 걸쳐서" 변환한다.*/
}
</style>
</head>
<body>
<div class="box">전환효과</div> <br>
<div class="line">
<div class="bar">속성값 : linear</div>
<div class="bar">속성값 : ease</div>
<div class="bar">속성값 : ease-in</div>
<div class="bar">속성값 : ease-out</div>
<div class="bar">속성값 : ease-in-out</div>
<div class="all">한번에 지정</div>
</div>
</body>
</html>
|
전환효과 한번에 지정
|
'CSS' 카테고리의 다른 글
| CSS transform - translate, scale, skew, rotate, transform-origin (0) | 2023.04.05 |
|---|---|
| CSS animation - name, duration, timing-function, delay, iteration-count, direction, fill-mode (0) | 2023.04.05 |
| CSS - float, clear (0) | 2023.04.04 |
| CSS position - relative, absolute, fixed, sticky, z-index (0) | 2023.04.04 |
| CSS box관련 - margin, border, padding, content (0) | 2023.04.02 |