Newer
Older
cafe-2022 / naoyuki / animation6.css
@TAKEDA Naoyuki TAKEDA Naoyuki on 12 Jul 2022 1 KB slideshow, typing, animation
/* Loading背景画面設定 */
#splash {
/*fixedで全面に固定*/
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#ffffff;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置 */
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定 */
#splash_logo img {
  width:360px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}



.slide{
   position: relative;
   width: 50%;
   padding-top: 0%;
   }

.slide img{
      position: absolute;
      width: 100%;
      height: auto;
      top:    0%;
      left:   50%;
      opacity: 0%;
      animation: slideshow 24s linear infinite;
      }


.slide img:nth-child(2){
                        animation-delay: 8s;
			}

.slide img:nth-child(3){
                        animation-delay: 16s;
			}


@keyframes slideshow{
          0%{
             opacity: 0%;
             }

 10%{
    opacity: 1;
    }

 28%{
     opacity: 1;
     }

 38%{
     opacity: 0;
     }

  100%{
      opacity: 0;
      }
}





.typing{
        height: 100vh;
	widht: vw;
	position: relative;
}
	
	

.typed{
	position: absolute;
	width: 100vw;
	text-align: center;
	top: 80%;
	left: 50%;
	transform: translate(-50%, -50%);
	}
	

.typed_wrap h1{
		color: black;
		font-family: 'Times New Roman',Times,serif;
		font-size: 3rem;
		}
		

.typed::after{
		content: "|";
		animation: blink 0.7s infinite
		}
		

@keyframes blink{
		50%{opacity:0;}
		}