작성일/수정일
2016-07-14 13:55:30 / 2022-12-16 10:30:30
transition
부드러운 장면전환효과를 주는 태그.
hover와 함께 장면전환효과를 주면 유용하다
- https://www.relation.co.kr/images_board/board_system_publishing/160/index.html
transition-property : 적용할 속성 지정. 모든값은 all
transition-duration : 지속되는 시간. 양수를 쓸 수 있다 기본값은 0.
transition-delay : 대기시간
transition-timing-function : 트랜지션 변화시의 움직임 설정. liner, ease, ease-in, ease-out, ease-in-out
- easing : 어떻게 움직일지 알려주는 속성
- linear 같은속도로 움직임
- ease-in 느리다가 빨라짐
- ease-out 빠르다가 느려짐
- easae-in-out 느려지다 빨라지다 느려짐
축약형
transition: 속성명 전환시간 가속도 지연시간;
- transition: background-position .2s ease-out .5s;
=> 0.5초가 지난 뒤 배경위치를 0.2초동안 ease-out되도록 장면전환하라.
css3가 웹표준이라도 아직 지원되지 않는 기능이 있을 수 있으므로 모든 브라우저에서 동일하게 나오도록 하는 브라우저별 벤더프리픽스를 써주자.
-moz- 파이어폭스
-webkit- 사파리 크롬
-o- 오페라
-ms- 익스플로러
-khtml- 콘쿼러
https://cubic-bezier.com/
ex)
<style>
#graph { width: 610px; border:3px solid #000; position:relative;}
.bar { width: 10px; height: 50px; background: orange; margin:5px; transition: 1s ease-out;}
.bar:nth-child(1) { transition-delay: 0.5s; }
.bar:nth-child(2) { transition-delay: 1s;}
.bar:nth-child(3) { transition-delay: 1.7s;}
#graph:hover .bar:nth-child(1){ width: 100px; background: #cccc00; opacity: 0.5; }
#graph:hover .bar:nth-child(2) { width: 200px; background: #cc9900; opacity: 0.5; }
#graph:hover .bar:nth-child(3) { width: 300px; background: #cc3300; opacity: 0.5; }
span { width:100px; height: 50px; transition: all 0.5s; opacity: 0; transform:scale(5);}
#graph:hover span { font-size: 13px; color: #fff; transition-delay: 1s; opacity: 1;
transform:scale(1); margin-left: 30px;}
</style>
<body>
<div id="graph">
<div class="bar">
<span>그래프</span>
</div>
<div class="bar"></div>
<div class="bar"></div>
</div><!-- #content -->
</body
<style>
.photo img {
width:10%; min-width:100px;
transition-property: width;
transition-duration: 2s;
transition-delay:1s;
transition-timing-function:ease-in-out;
}
.photo img:hover {
width:20%;
}
</style>
<div class="photo"><img src='이미지 경로'></div>
<style>
.photo img {
width:20%; min-width:100px; opacity:0.3;
/*
transition-property : width, margin-left, opacity:0.5;
transition-duration : 2s;
transition-delay : 1s;
transition-timing_function : ease-in-out;
*/
transition : all 2s 1s cubic-bezier(.17,.67,.88,1.4);
}
.photo:hover img {
width:30%;
margin-left:100px;
opacity:1;
}
</style>
<div class="photo"><img src="이미지"></div>
cubic-bezier
