コピペでできるテキストのアニメーション一覧[HTML/CSS/JavaScript]

<p class="t8-anitext-1">これはサンプルです。</p>

 .t8-anitext-1{
    animation: t8-anitext-1 3s ease 0.3s 1 normal;
    animation-iteration-count: infinite;
    }
@keyframes t8-anitext-1 { 
    0% {opacity: 0} 
    100% {opacity: 1} 
    }

<p class="t8-anitext-2">これはサンプルです。</p>

.t8-anitext-2{
    animation: t8-anitext-2 1.5s infinite;
    }

@keyframes t8-anitext-2 {
    0% {
        opacity: 0;/*初期状態では透明に*/
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

<p class="t8-anitext-3">これはサンプルです。</p>

.t8-anitext-3{
    animation: t8-anitext-3 1.5s infinite;
    }
 @keyframes t8-anitext-3 {
    0% {
    opacity: 0;/*初期状態では透明に*/
        transform: translateX(65px);
    }
    100% {
    opacity: 1;
    transform: translateX(0);
    }
}

<p class="t8-anitext-4">これはサンプルです。</p>

.t8-anitext-4{
    width: 0;
    border-right: 0.1em solid black; 
    overflow: hidden; 
    white-space: nowrap; 
    animation: t8-anitext-4 4s steps(11, end) forwards infinite, t8-anitext-4one 1s step-end infinite;
}

@keyframes t8-anitext-4{
    0% { width: 0%; }
    100% { width: 11em; }
}

@keyframes t8-anitext-4one{
    0%{ border-color: transparent; }
    50%{ border-color: black; } 
    100%{ border-color: transparent; }
}

<p class="t8-anitext-5">これはサンプルです。</p>

.t8-anitext-5{
    animation: t8-anitext-5 1.5s infinite;
    overflow: hidden;
    }

@keyframes t8-anitext-5 {
    0% {
    opacity: 0;
    font-size: 0em;
    }
}
    100% {
    opacity: 1;
    font-size: 2em;
    }
}
}

<p class="t8-anitext-6">これはサンプルです。</p>

.t8-anitext-6{
    animation: t8-anitext-6 1.5s infinite;
    }

@keyframes t8-anitext-6 {
    0% {
        opacity: 0;/
        transform: rotateX(360deg);
        }
    100% {
        opacity: 1;
        transform: rotateX(0);
    }
}

<p class="t8-anitext-7">これはサンプルです。</p>

.t8-anitext-7{
    animation: t8-anitext-7 1s infinite;
}

@keyframes t8-anitext-7 {
    0% {
    opacity: 1;
    }

    50% {
    opacity: 0;
    }
  
    100% {
    opacity: 1;
    }

}

<p class="t8-anitext-7a">これはサンプルです。</p>

.t8-anitext-7a{
  animation: t8-anitext-7a 1s infinite;
}

@keyframes t8-anitext-7a {
    0% {
    }

    50% {
    }
 
    100% {
       	text-shadow: 
		0 0 0.05em #0d6efd,
		0 0 0.10em #0d6efd,
		0 0 0.15em #0d6efd,
		0 0 0.30em #0d6efd;
    }

}

<p class="t8-anitext-8">これはサンプルです。</p>

.t8-anitext-8{
    animation: t8-anitext-8 1.5s infinite;
    overflow: hidden;
}

@keyframes t8-anitext-8 {
    0% {
    color: blue;

}
  }
    100% {
     color: ;
}
  }
}

<p class="t8-anitext-9"><span>これはサンプルです。</span></p>

.t8-anitext-9 {
    margin : 0 auto 40px;
    width : 50%;
    font-size : 1em;
    text-align : center;
    overflow : hidden;
}
.t8-anitext-9 span{
    margin:0;
    display : inline-block;
    padding-left: 100%;
    white-space : nowrap;
    line-height : 1em;
    animation : t8-anitext-9 20s linear infinite;
}
@keyframes t8-anitext-9{
    0% { transform: translateX(0)}
    100% { transform: translateX(-100%)}
}



    }

@keyframes SlideIndad {
    0% { transform: translateX(0)}
    100% { transform: translateX(-100%)}
}

<div class="t8-anitext-10">
  <span>サ</span>
  <span>ン</span>
  <span>プ</span>
  <span>ル</span>
  <span>で</span>
  <span>す</span>
  <span>。</span>
</div>

.t8-anitext-10{
    margin-top: 1em;
}

.t8-anitext-10 span{
    display: inline-block;
    animation: t8-anitext-10 1s ease-in-out infinite;
}


.t8-anitext-10 span:nth-of-type(1){ animation-delay: 0.0s; }
.t8-anitext-10 span:nth-of-type(2){ animation-delay: 0.1s; }
.t8-anitext-10 span:nth-of-type(3){ animation-delay: 0.2s; }
.t8-anitext-10 span:nth-of-type(4){ animation-delay: 0.3s; }
.t8-anitext-10 span:nth-of-type(5){ animation-delay: 0.4s; }
.t8-anitext-10 span:nth-of-type(6){ animation-delay: 0.5s; }
.t8-anitext-10 span:nth-of-type(7){ animation-delay: 0.6s; }

@keyframes t8-anitext-10{
    00%{
        transform: translateY(0em);
  }
    60%{
        transform: translateY(-1em);
  }

    100%{
        transform: translateY(0em);
  }
}

<div class="t8-anitext-11">
  <span>サ</span>
  <span>ン</span>
  <span>プ</span>
  <span>ル</span>
  <span>で</span>
  <span>す</span>
  <span>。</span>
</div>

.t8-anitext-11{
  margin-top: 1em;
}

.t8-anitext-11 span{
    display: inline-block;
    animation: t8-anitext-11 1s ease-in-out infinite;
}


@keyframes t8-anitext-11{
    00%{
        transform: translateY(0em);
  }
    60%{
        transform: translateY(-1em);
  }

    100%{
        transform: translateY(0em);
  }
}

<p class="t8-anitext-12">これはサンプルです。</p>

.t8-anitext-12{
    animation: t8-anitext-12 1.5s infinite;
    }

@keyframes t8-anitext-12 {
    0% {
        opacity: 0;
        letter-spacing: 0em;
  }
    100% {
        opacity: 1;
        letter-spacing: 2em;
  }
}

<div class="t8-anitext-13">
  <span>サ</span>
  <span>ン</span>
  <span>プ</span>
  <span>ル</span>
  <span>で</span>
  <span>す</span>
  <span>。</span>
</div>

.t8-anitext-13{
    margin-top: 1em;
}

.t8-anitext-13 span{
    display: inline-block;
    animation: t8-anitext-13 1s ease-in-out infinite;
}

.t8-anitext-13 span:nth-of-type(1){ animation-delay: 0.0s; }
.t8-anitext-13 span:nth-of-type(2){ animation-delay: 0.1s; }
.t8-anitext-13 span:nth-of-type(3){ animation-delay: 0.2s; }
.t8-anitext-13 span:nth-of-type(4){ animation-delay: 0.3s; }
.t8-anitext-13 span:nth-of-type(5){ animation-delay: 0.4s; }
.t8-anitext-13 span:nth-of-type(6){ animation-delay: 0.5s; }
.t8-anitext-13 span:nth-of-type(7){ animation-delay: 0.6s; }

@keyframes t8-anitext-13{
    0%{
        color: blue;
  }
 
  }

    100%{
       
  }
}