편집토론문서 역사

틀:ZC-animation2/styles.css: 두 판 사이의 차이

(새 문서: →‎# 등장 애니메이션: .ZCA-maintext { opacity: 0; animation: ZCA-maintext; animation-iteration-count: 1; animation-duration: 1s; animation-delay: 0.9s; animation-...)
 
잔글 (Lena님이 틀:ZCanimation/styles.css 문서를 넘겨주기를 만들지 않고 틀:ZC-animation2/styles.css 문서로 이동했습니다)
 
(사용자 2명의 중간 판 37개는 보이지 않습니다)
1번째 줄: 1번째 줄:
/*   # 등장 애니메이션   */
/*   배경 애니메이션   */
.ZCM-Con  {
display:inline-block;
width: 100%;
user-select:none;
}
 
.ZCM-imageAni1  {
display:inline-block;
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(0%);
}
 
@keyframes ZCM-imageAni1 {
  from {opacity: 0; transform: translateY(2%);}
  to {opacity: 1; transform: translateY(0%);}
}


.ZCA-maintext {
.ZCM-imageAni2 {
display:inline-block;
  opacity: 0;
  opacity: 0;
  animation: ZCA-maintext;
  animation: ZCM-imageAni2;
  animation-iteration-count: 1;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-duration: 1.5s;
  animation-delay: 0.9s;
  animation-delay: 2.5s;
  animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  transition: .2s ease;
  transition: .2s ease;
12번째 줄: 35번째 줄:
}
}


@keyframes ZCA-maintext {
@keyframes ZCM-imageAni2 {
   from {opacity: 0; transform: translateY(-20%);}
   from {opacity: 0; transform: translateY(-5%);}
  to {opacity: 1; transform: translateY(0%);}
}
 
.ZCM-imageAni3  {
position:relative;
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%);}
   to {opacity: 1; transform: translateY(0%);}
}
}


.ZCA-subtext {
.ZCM-imageAni4-3 {
  opacity: 0;
  opacity: 0;
  animation: ZCA-subtext;
  animation: ZCM-imageAni4-3;
  animation-iteration-count: 1;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-duration: 1.5s;
  animation-delay: 0.5s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  transition: .2s ease;
  transition: .2s ease;
  transform: translateX(0%);
  transform: translateY(15%);
}
 
@keyframes ZCM-imageAni4-3 {
  from {opacity: 0; transform: translateY(15%);}
  to {opacity: 1; transform: translateY(0%);}
}
 
.ZCM-imageAni5  {
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;
}
}


@keyframes ZCA-subtext {
/* 호버 */
  from {opacity: 0; transform: translateX(-2%);}
.ZCM-hoverA {
  to {opacity: 1; transform: translateX(0%);}
    filter:brightness(1) contrast(100%);
    transition: filter 0.5s;
}
.ZCM-hoverA:hover {
    filter:brightness(1.5) contrast(150%);
}
}

2024년 9월 17일 (화) 20:48 기준 최신판

/*    배경 애니메이션    */
.ZCM-Con  {
	 display:inline-block;
	 width: 100%;
	 user-select:none;
}

.ZCM-imageAni1  {
 display:inline-block;
 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(0%);
}

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

.ZCM-imageAni2  {
 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(0%);
}

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

.ZCM-imageAni3  {
 position:relative;
 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-imageAni5  {
 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%);
}