⛏️/HTML | CSS

[CSS] 14. 반응형 - transition

defyuil 2024. 1. 10. 15:15

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transition</title>
<link href="style.css" rel="stylesheet">
<link href="transition.css" rel="stylesheet">
</head>
<body>
 <h1 class="tr">transition</h1>
 <ul>
  <li>transition-property: ; 적용할 속성명</li>
  <li>transition-duration: ; (필수)진행 시간</li>
  <li>transition-delay: ; 지연 시간</li>
  <li>transition-timing-function: ; 가속 감속 등</li>
 </ul>
  <p>* 시간은 초(s)나 밀리초(ms)단위를 적용</p>
 
 
 <section id="sec01">
  <h2>transition-timing-function: ;</h2>
 
  <div class="ttf01"><b>ease</b></div>
  <div class="ttf02">ease-in</div>
  <div class="ttf03">ease-out</div>
  <div class="ttf04">ease-in-out</div>
  <div class="ttf05">linear</div>
   <!-- https://cubic-bezier.com/ -->
  <div class="ttf06">cubic-bezier(.76,2.18,.78,-0.71)</div>
  <div class="ttf07">cubic-bezier(.56,-0.12,1,1.93)</div>
 </section>
 
 
 
 
 
</body>
</html>

 

CSS

@charset "UTF-8";

.tr {background-color: #ce0;
width: 200px; height: 60px;}

.tr:hover {background-color:#e00;
width: 600px; height: 100px;
font-size:3em; 
transition-property:background-color;
transition-duration:1s;
transition-delay:1s;}

#sec01>div {background-color:#2cf; 
border-right:14px solid #07a;
margin-bottom:30px;
padding:5px;
width: 200px;
box-sizing: border-box;
text-align: right;}

#sec01:hover>div {
 transform:translate(1200px,0);	
 transition:3s 1s;}
 
#sec01:hover>.ttf01 {
transition-timing-function:ease;}
#sec01:hover>.ttf02 {
transition-timing-function:ease-in;}
#sec01:hover>.ttf03 {
transition-timing-function:ease-out;}
#sec01:hover>.ttf04 {
transition-timing-function:ease-in-out;}
#sec01:hover>.ttf06 {
transition-timing-function:linear;} 
#sec01:hover>.ttf07 {
transition-timing-function:
cubic-bezier(.76,2.18,.78,-0.71);} 
#sec01:hover>.ttf08 {
transition-timing-function: 
cubic-bezier(.56,-0.12,1,1.93);}