practice

　　　　

<html>

<meta charset="utf-8">
<style>
div{margin:0 auto;
text-align:center;}
span{display:inline-block;
font-family:Arial Black;
font-size:40px;
color:#8a2be2;
opacity:0;
transform:translate(-150px,0)scale(0.3);
animation:アニメーション_ロゴ 1s forwards;}
@keyframes アニメーション_ロゴ{60%{transform:translate(50px,0)scale(0.5);
opacity:1;
color:#000000;}
60%{color:#ff00ff;}
80%{transform:translate(0)scale(3);
opacity:0;}
100%{transform:translate(0)scale(1);
opacity:1;}}
span:nth-of-type(1){animation-delay:0;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(2){animation-delay:0.2s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(3){animation-delay:0.24s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(4){animation-delay:0.28s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(5){animation-delay:0.32s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(6){animation-delay:0.36s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(7){animation-delay:0.4s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(8){animation-delay:0.44s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(9){animation-delay:0.48s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(10){animation-delay:0.52s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(11){animation-delay:0.56s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(12){animation-delay:0.6s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(13){animation-delay:0.64s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(14){animation-delay:0.68s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(15){animation-delay:0.72s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(16){animation-delay:0.76s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(17){animation-delay:0.8s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(18){animation-delay:0.84s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(19){animation-delay:0.88s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(20){animation-delay:0.92s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(21){animation-delay:0.96s;filter:drop-shadow(3px 3px 5px silver);}
span:nth-of-type(22){animation-delay:1s;filter:drop-shadow(3px 3px 5px silver);}
</style>

<hr>
<div>
<span>S</span><span>T</span><span>U</span><span>D</span><span>Y</span> <span>H</span><span>T</span><span>M</span><span>L</span> <span>C</span><span>S</span><span>S</span> <span>J</span><span>a</span><span>v</span><span>a</span><span>S</span><span>c</span><span>r</span><span>i</span><span>p</span><span>t</span>
</div>
<hr>

</html>