편집 요약 없음 |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
.DO-HO- | .DO-HO-box { | ||
} | |||
.DO-HO-item1 { | |||
overflow:hidden; | overflow:hidden; | ||
width:100%; | width:100%; | ||
opacity:1; | opacity:1; | ||
} | } | ||
.DO-HO- | .DO-HO-item2 { | ||
overflow:hidden; | overflow:hidden; | ||
width:0px; | width:0px; | ||
opacity:0; | opacity:0; | ||
} | } | ||
.DO-HO- | .DO-HO-box:hover > .DO-HO-item2 { | ||
animation: DO-HO-tap1; | animation: DO-HO-tap1; | ||
animation-iteration-count: 1; | animation-iteration-count: 1; | ||
| 16번째 줄: | 18번째 줄: | ||
animation-timing-function: ease; | animation-timing-function: ease; | ||
} | } | ||
.DO-HO- | .DO-HO-box:hover > .DO-HO-item1 { | ||
animation: DO-HO-tap2; | animation: DO-HO-tap2; | ||
animation-iteration-count: 1; | animation-iteration-count: 1; | ||
2024년 2월 4일 (일) 09:08 판
.DO-HO-box {
}
.DO-HO-item1 {
overflow:hidden;
width:100%;
opacity:1;
}
.DO-HO-item2 {
overflow:hidden;
width:0px;
opacity:0;
}
.DO-HO-box:hover > .DO-HO-item2 {
animation: DO-HO-tap1;
animation-iteration-count: 1;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
.DO-HO-box:hover > .DO-HO-item1 {
animation: DO-HO-tap2;
animation-iteration-count: 1;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
@keyframes DO-HO-tap1 {
from {width:0px;opacity:0;}
50% {width:100%;opacity:1;}
to {width:auto;opacity:1;}
}
@keyframes DO-HO-tap2 {
from {width:auto;opacity:1;}
50% {width:0%;opacity:1;}
to {width:0px;opacity:0;}
}
.JO-tax-trigger {
cursor: help;
}
.JO-tax-content {
overflow:hidden;
height:0px;
opacity:0;
}
.JO-tax-trigger:hover > .JO-tax-content {
animation: JO-tax-tap;
animation-iteration-count: 1;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
@keyframes JO-tax-tap {
from {height:0px;opacity:0;}
50% {height:26px;opacity:1;}
to {height:auto;opacity:1;}
}
.JO-tax-trigger1 {
cursor: help;
}
.JO-tax-trigger1:hover > .JO-tax-content {
animation: JO-tax-tap1;
animation-iteration-count: 1;
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
@keyframes JO-tax-tap1 {
from {height:0px;opacity:0;}
50% {height:74px;opacity:1;}
to {height:auto;opacity:1;}
}
.JO-tax-trigger2 {
cursor: help;
}
.JO-tax-trigger2:hover > .JO-tax-content {
animation: JO-tax-tap2;
animation-iteration-count: 1;
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
@keyframes JO-tax-tap2 {
from {height:0px;opacity:0;}
50% {height:81px;opacity:1;}
to {height:auto;opacity:1;}
}
.JO-tax-trigger3 {
cursor: help;
}
.JO-tax-trigger3:hover > .JO-tax-content {
animation: JO-tax-tap3;
animation-iteration-count: 1;
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
@keyframes JO-tax-tap3 {
from {height:0px;opacity:0;}
50% {height:53px;opacity:1;}
to {height:auto;opacity:1;}
}