/* 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;} }