틀:ZC-animation2/styles.css

/*    배경 애니메이션    */
.ZCM-imageAni1  {
 display:inline-block;
 position:absolute;
 opacity: 0;
 animation: ZCM-imageAni1;
 animation-iteration-count: 1;
 animation-duration: 1.5s;
 animation-delay: 2s;
 animation-fill-mode: forwards;
 transition: .2s ease;
 transform: translateY(-2%);
}

@keyframes ZCM-imageAni1 {
  from {opacity: 0; transform: translateY(-2%);}
  to {opacity: 1; transform: translateX(0%);}
}

.ZCM-imageAni2  {
 position:absolute;
 display:inline-block;
 opacity: 0;
 animation: ZCM-imageAni2;
 animation-iteration-count: 1;
 animation-duration: 1.5s;
 animation-delay: 2.5s;
 animation-fill-mode: forwards;
 transition: .2s ease;
 transform: translateY(5%);
}

@keyframes ZCM-imageAni2 {
  from {opacity: 0; transform: translateY(5%);}
  to {opacity: 1; transform: translateY(0%);}
}

.ZCM-imageAni3  {
 position:absolute;
 display:inline-block;
 opacity: 0;
 animation: ZCM-imageAni3;
 animation-iteration-count: 1;
 animation-duration: 1.5s;
 animation-delay: 1.5s;
 animation-fill-mode: forwards;
 transition: .2s ease;
}

@keyframes ZCM-imageAni3 {
  from {opacity: 0;}
  to {opacity: 1;}
}

.ZCM-imageAni4-1  {
 opacity: 0;
 animation: ZCM-imageAni4-1;
 animation-iteration-count: 1;
 animation-duration: 1.5s;
 animation-delay: 2s;
 animation-fill-mode: forwards;
 transition: .2s ease;
 transform: translateY(15%);
}

@keyframes ZCM-imageAni4-1 {
  from {opacity: 0; transform: translateY(15%);}
  to {opacity: 1; transform: translateY(0%);}
}

.ZCM-imageAni4-2  {
 opacity: 0;
 animation: ZCM-imageAni4-2;
 animation-iteration-count: 1;
 animation-duration: 1.5s;
 animation-delay: 2.5s;
 animation-fill-mode: forwards;
 transition: .2s ease;
 transform: translateY(15%);
}

@keyframes ZCM-imageAni4-2 {
  from {opacity: 0; transform: translateY(15%);}
  to {opacity: 1; transform: translateY(0%);}
}

.ZCM-imageAni4-3  {
 opacity: 0;
 animation: ZCM-imageAni4-3;
 animation-iteration-count: 1;
 animation-duration: 1.5s;
 animation-delay: 3s;
 animation-fill-mode: forwards;
 transition: .2s ease;
 transform: translateY(15%);
}

@keyframes ZCM-imageAni4-3 {
  from {opacity: 0; transform: translateY(15%);}
  to {opacity: 1; transform: translateY(0%);}
}

/*    배경    */

.ZCM-bgMain  {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #1a1a1f;
  display: inherit;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index:-3;
}

/*    칸 CSS    */

.ZCM-MainBox {
	background: transparent;
	width:100%;
	display: inline-block;
	justify-content:center;
	align-items:center;
}

.ZCM-SecBox {
	background: transparent;
	width:100%;
	display: inline-block;
}

/*    박스    */

.ZCM-box0{
  background:linear-gradient(0deg, rgba(36,35,46,1) 0%, rgba(98,46,26,1) 100%);
  width:100%;
  color: white;
  line-height: 2em;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
}

.ZCM-box1{
  background: linear-gradient(45deg, rgba(43,33,64,1) 0%, rgba(61,28,31,1) 100%);
  border-radius: 0px;
  width:100%;
  color: white;
  line-height: 2em;
  padding: 1em;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
}

.ZCM-box2{
  background: #000000;
  border-radius: 0px;
  width:100%;
  color: white;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
}

/*    [섹션]    */

/*    섹션1    */
.ZCM-Section1 {
    background: transparent;
	transition: background 1s;
}
.ZCM-Section1a {
    transform: translateX(55%);
	transition: transform 1s;
}
.ZCM-Section1b {
    display:inline-block;
    overflow:hidden;
    transform: translateX(45%);
    height:0px;
    opacity:0;
	transition:opacity 1s, transform 1s, height 1s;
}
.ZCM-Section1:hover > .ZCM-Section1a {
    transform: translateX(10%);
}
.ZCM-Section1:hover > .ZCM-Section1b {
    transform: translateX(0%);
    height:max-content;
    opacity:1;
}
.ZCM-Section1:hover {
    background: rgba(0, 0, 0, 0.7);
}

/*    섹션2    */
.ZCM-Section2 {
    background: transparent;
	transition: background 1s;
}
.ZCM-Section2a {
    transform: translateX(55%);
	transition: transform 1s;
}
.ZCM-Section2b {
    display:inline-block;
    overflow:hidden;
    transform: translateX(-145%);
    height:0px;
    opacity:0;
	transition:opacity 1s, transform 1s, height 1s;
}
.ZCM-Section2:hover > .ZCM-Section2a {
    transform: translateX(100%);
}
.ZCM-Section2:hover > .ZCM-Section2b {
    transform: translateX(-100%);
    height:max-content;
    opacity:1;
}
.ZCM-Section2:hover {
    background: rgba(0, 0, 0, 0.7);
}

/*    섹션3    */
.ZCM-Section3 {
    background: transparent;
	transition: background 1s;
}
.ZCM-Section3a {
    transform: translateX(55%);
	transition: transform 1s;
}
.ZCM-Section3b {
    display:inline-block;
    overflow:hidden;
    transform: translateX(45%);
    height:0px;
    opacity:0;
	transition:opacity 1s, transform 1s, height 1s;
}
.ZCM-Section3:hover > .ZCM-Section3a {
    transform: translateX(10%);
}
.ZCM-Section3:hover > .ZCM-Section3b {
    transform: translateX(0%);
    height:max-content;
    opacity:1;
}
.ZCM-Section3:hover {
    background: rgba(0, 0, 0, 0.7);
}

/*    섹션4    */
.ZCM-Section4 {
    background: transparent;
	transition: background 1s;
}
.ZCM-Section4a {
    transform: translateX(55%);
	transition: transform 1s;
}
.ZCM-Section4b {
    display:inline-block;
    overflow:hidden;
    transform: translateX(-145%);
    height:0px;
    opacity:0;
	transition:opacity 1s, transform 1s, height 1s;
}
.ZCM-Section4:hover > .ZCM-Section4a {
    transform: translateX(100%);
}
.ZCM-Section4:hover > .ZCM-Section4b {
    transform: translateX(-100%);
    height:max-content;
    opacity:1;
}
.ZCM-Section4:hover {
    background: rgba(0, 0, 0, 0.7);
}

/*    # 모바일 반응성    */

@media screen and (min-width: 700px) {
	.ZCM-WebDisplay {
    	display:inherit;
	}
}
@media screen and (min-width: 700px) {
	.ZCM-MobileDisplay {
    	display:none;
	}
}
@media screen and (max-width: 700px) {
	.ZCM-WebDisplay {
    	display:none;
	}
}
@media screen and (max-width: 700px) {
	.ZCM-MobileDisplay {
    	display:inherit;
	}
}

/* z 인덱스 */
.ZCM-Z-3 {
	z-index:3;
}

/* 호버 */
.ZCM-hoverA {
    filter:brightness(1) contrast(100%);
    transition: filter 0.5s;
}
.ZCM-hoverA:hover {
    filter:brightness(1.5) contrast(150%);
}