目次
テキストアニメーション一覧
フェードイン
これはサンプルです。
<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%{
}
}