css3 文本动画 |css控制li的形状

/*动画名称和执行时间*/
animation: animation-name animation-duration;
/*设置动画名称*/
animation-name: name;
/*设置动画执行时间*/
animation-duration: time;
/*重复次数*/
animation-iteration-count: number | infinite;
/*设置动画延迟时间*/
animation-delay: time;
/*设置动画速度*/
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
/*是否反向执行*/
animation-direction: normal | reverse | alternate | alternate-reverse;

以下是一些常用的CSS3文本动画实例：

/*闪烁*/
@keyframes twinkle {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.text{
animation: twinkle 1s infinite;
}
/*左右晃动*/
@keyframes shake {
0% {
transform: translateX(0);
}
10%, 90% {
transform: translateX(-10px);
}
20%, 80% {
transform: translateX(10px);
}
30%, 50%, 70% {
transform: translateX(-10px);
}
40%, 60% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.text{
animation: shake 1s infinite;
}
/*放大*/
@keyframes zoomIn {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
.text{
animation: zoomIn 1s;
}
/*脉冲*/
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(1.1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
.text{
animation: pulse 2s infinite;
}

以上是一些常用的CSS3文本动画属性和实例，通过使用这些属性和实例，可以轻松为你的网页增添动画效果和生动感。在使用时，应尽量避免过度使用动画效果，在考虑到网页的性能和使用体验时，合理地使用文本动画效果，可以更加有效地提升网页的质量和用户体验。