html+cssのみ(javascriptなし)でテキストアニメーション練習

https://photopizza.design/css_textanimation/
上記を写経し、以下。
https://end0tknr.github.io/sandbox/css_animation.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet"
href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css">
  <style>
body { background: #EF5350;}

.joycon-left { position     : fixed;
           width        : 65px;
           height       : 190px;
           border-radius: 10px 10px 10px 10px;
           border       : 15px solid #fff;
           /* transform translate& & animation で移動 */
           transform: translate(calc(50vw - 100px), calc(50vh - 200px));
           /* easeで開始&終了時を緩やか変化 */
           animation: joycon-left-anima 2.0s ease; }
.joycon-left .eaves {width     : 75px;
             height    : 15px;
             position  : fixed;
             margin-top: 20px;
             left      : -2px;
             background: #fff; }
.joycon-left .pad {  position     : fixed;
             width        : 45px;
             height       : 45px;
             border-radius: 10px;
             background   : #fff;
             margin-top   : 55px;
             margin-left  : 10px; }

.joycon-right { position: fixed;
        background: #fff;
        width: 90px;
        height: 220px;
        border-radius: 10px 10px 10px 10px;
        transform: translate(calc(50vw + 10px), calc(50vh - 200px));
        animation: joycon-right-anima 2.0s ease; }
.joycon-right .eaves {width     : 95px;
              height    : 15px;
              position  : fixed;
              left      : -2px;
              margin-top: 35px;
              background: #EF5350;}

.joycon-right .pad {  width        : 45px;
              height       : 65px;
              border-radius: 10px;
              position     : fixed;
              margin-top   : 140px;
              margin-left  : 22px;
              background   : #EF5350; }

.logo-text {    animation: text-anima 2.0s ease;
        position: fixed;
        /*font-family: logofont;*/
        font-family: 'Noto Sans Japanese';
        font-weight: bold;
        white-space: nowrap;
        color: #fff; }
.sub-text { font-size: 40px;
        position: fixed;
        transform: translate(calc(50vw - 110px), calc(50vh + 20px));}
.main-text {font-size: 60px;
        position: fixed;
        transform: translate(calc(50vw - 120px), calc(50vh + 50px));}

@keyframes joycon-left-anima {
    0%  {transform: translate(calc(50vw - 100px), calc(50vh - 200px));}
    70% {transform: translate(calc(50vw - 100px), calc(50vh - 200px));}
    85% {transform: translate(calc(50vw - 100px), calc(50vh - 180px));} }
@keyframes joycon-right-anima {
    0%  {transform: translate(calc(50vw + 10px), calc(50vh - 240px));}
    25% {transform: translate(calc(50vw + 10px), calc(50vh - 240px));}
    50% {transform: translate(calc(50vw + 10px), calc(50vh - 260px));}
    65% {transform: translate(calc(50vw + 10px), calc(50vh - 260px));}
    85% {transform: translate(calc(50vw + 10px), calc(50vh - 180px));} }
@keyframes text-anima {
    0%  {transform: translate(0px,  0px); opacity:0;}
    75% {transform: translate(0px,  0px); opacity:0;}
    85% {transform: translate(0px, 15px);} }
</style>
</head>
<body>
  https://photopizza.design/css_textanimation/

<div class="switch-logo">
  <div class="joycon-left">
    <div class="eaves"></div>
    <div class="pad"></div>
  </div>
  <div class="joycon-right">
    <div class="eaves"></div>
    <div class="pad"></div>
  </div>
  <div class="logo-text">
    <div class="sub-text">N??? ENDO</div>
    <div class="main-text">TKB :DX</div>
  </div>
</div>

</body>
</html>
end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ
