在設計網頁時，文字動畫效果可以增強網頁的視覺效果，吸引用戶的注意力。下面是一些常見的文字css動畫效果代碼。

/*字母出現效果*/
h1{
overflow: hidden;
border-right: .15em solid orange;
animation: cursor 1s infinite;
}
@keyframes cursor{
50%{
border-color: transparent;
}
}
/*字體顏色漸變效果*/
h2{
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient 15s linear infinite;
}
@keyframes gradient{
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}
/*彈性文本效果*/
h3{
animation: stretch 2s ease-out infinite alternate;
}
@keyframes stretch{
from{
transform: scale(1);
}
to{
transform: scale(1.2);
}
}
/*閃爍文本效果*/
h4{
animation: blink 1s linear infinite;
}
@keyframes blink{
0%{
visibility: visible;
}
50%{
visibility: hidden;
}
}
/*上下旋轉文本效果*/
h5{
display: inline-block;
animation: rotate 5s linear infinite;
}
@keyframes rotate{
0%{
transform: rotateY(0deg);
}
50%{
transform: rotateY(180deg);
}
100%{
transform: rotateY(0deg);
}
}

以上就是一些常用的文字css動畫效果代碼，可以根據需要在設計網頁時使用，提升網頁的觀賞性和用戶體驗。