안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.
transition
- A → B
- 하나의 요소의 상태가 변경될 때 변경하는 과정을 노출 시켜 동영상 효과를 줌
HTML 코드
<body>
<h1>transition</h1>
<div class="box"></div>
</body>
CSS 코드
<style>
.box {
width: 100px;
height: 100px;
border: 2px solid black;
background-color: tomato;
}
body:hover .box {
transform: translate(500px, 0) rotate(360deg);
background-color: yellow;
}
</style>
body에 마우스를 hover하면 transform과 background-color가 yellow로 변경됩니다.
transition-duration
- 소요시간
transition-duration: 2s; /* 소요 시간 */
transition-duration 속성으로 소요시간을 지정해주어 요소가 변경되는 과정이 노출됩니다.
훨씬 부드럽게 움직이는 것을 확인할 수 있습니다.
transition-property
- 적용하고자 하는 속성 (기본값 : all)
transition-property: transform;
transform에 대해서만 transition이 적용되도록 하였기 때문에 background-color가 변경되는 과정은 노출되지 않는 것을 확인할 수 있습니다.
transition-delay
transition-delay: .3s;
마우스를 hover했을 때 약간의 delay가 생긴 후 transform이 적용되는 것을 확인할 수 있습니다.
transition-timing-function
- linear / ease / ease-in / ease-out / linear / ease-in-out
transition-timing-function: linear; /* ease | ease-in | ease-out | linear | ease-in-out */
효과가 적용되는 빠르기를 조정할 수 있습니다.
※ linear 이외 효과 확인하기
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition-timing-function2
W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com
모아쓰기
/* property duration timeing-function delay */
transition: transform 2s liear .3s;
HTML 코드
<div class="wrapper">
<div class="tile">
<h1>Hello World</h1>
<h2 class="transition">Hello World부터 Lotte World까지..</h2>
<p class="transition">Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio aspernatur molestias nobis asperiores quam unde reiciendis soluta quia dignissimos, numquam quaerat voluptatibus ipsum a. Adipisci, tempore aperiam? Nisi, cumque facilis?</p>
</div>
<div class="tile">
<h1>Hello World</h1>
<h2 class="transition">Hello World부터 Lotte World까지..</h2>
<p class="transition">Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio aspernatur molestias nobis asperiores quam unde reiciendis soluta quia dignissimos, numquam quaerat voluptatibus ipsum a. Adipisci, tempore aperiam? Nisi, cumque facilis?</p>
</div>
<div class="tile">
<h1>Hello World</h1>
<h2 class="transition">Hello World부터 Lotte World까지..</h2>
<p class="transition">Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio aspernatur molestias nobis asperiores quam unde reiciendis soluta quia dignissimos, numquam quaerat voluptatibus ipsum a. Adipisci, tempore aperiam? Nisi, cumque facilis?</p>
</div>
<div class="tile">
<h1>Hello World</h1>
<h2 class="transition">Hello World부터 Lotte World까지..</h2>
<p class="transition">Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio aspernatur molestias nobis asperiores quam unde reiciendis soluta quia dignissimos, numquam quaerat voluptatibus ipsum a. Adipisci, tempore aperiam? Nisi, cumque facilis?</p>
</div>
</div>
CSS 코드
<style>
.wrapper {
display: flex;
flex-wrap: wrap;
}
.tile {
width: 380px;
height: 380px;
margin: 10px;
padding: 30px;
background-color: #99aeff;
color: white;
box-shadow: 0 35px 77px -17px rgba(0, 0, 0, .4);
overflow: hidden;
}
.tile h1 {
text-shadow: 2px 2px 10px rgba(0, 0, 0, .3);
}
.tile h2 {
font-style: italic;
transform: translate(380px);
}
.tile p {
transform: translate(-380px);
transition-delay: .1s;
}
.transition {
transition-duration: .6s;
opacity: .3;
}
.tile:hover {
box-shadow: 0 35px 77px -17px rgba(0, 0, 0, .8);
}
.tile:hover .transition {
transform: translate(0);
opacity: 1;
}
</style>
overflow
- 주어진 공간을 넘어가는 content에 대한 설정
hidden을 주어 .tile의 공간을 넘어가면 숨겨지도록 하였습니다.
opacity 속성을 이용하여 글씨의 투명도를 조절하였습니다.
HTML 코드
<div class="container">
<div class="img-wrapper">
<img src="../../sample/image/flower1.PNG" alt="">
</div>
<div class="img-wrapper">
<img src="../../sample/image/flower2.PNG" alt="">
</div>
<div class="img-wrapper">
<img src="../../sample/image/flower3.PNG" alt="">
</div>
<div class="img-wrapper">
<img src="../../sample/image/flower4.PNG" alt="">
</div>
</div>
CSS 코드
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.img-wrapper {
width: 300px;
height: 200px;
border: 1px solid lightgray;
overflow: hidden;
margin: 3px;
}
.img-wrapper img {
width: 100%;
transition-duration: .3s;
}
.img-wrapper:hover img {
transform: scale(1.1);
}
</style>
