<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
ul{
list-style-type:none;
padding:0px;
margin:0px;
border:1px solid red;
width:200px;
text-align:center;
}
li:hover{
color:white;
animation:a 1s infinite;
-webkit-animation: a 1s infinite;
}
@keyframes a{
0% {background:rgba(39, 121, 99, 0.61);width:60%;}
25%{background:rgba(49, 151, 99, 0.7);width:70%;}
50%{background:rgba(59, 121, 109, 0.61);width:80%;}
100%{background:rgba(69, 141, 119, 0.61);width:100%;}
}
@-webkit-keyframes a{
0% {background:rgba(39, 121, 99, 0.61);width:60%;}
25%{background:rgba(49, 151, 99, 0.7);width:70%;}
50%{background:rgba(59, 121, 109, 0.61);width:80%;}
100%{background:rgba(69, 141, 119, 0.61);width:100%;}
}
</style>
</head>
<body>
<ul>
<li>hello</li>
<li>world</li>
<li>thanks</li>
</ul>
</body>
</html>
我想要背景长度变化，而文字不移动，要怎么修改呢
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
http://jsfiddle.net/hp20z4z6/
http://jsfiddle.net/rsbpw6ck/1/
Changed the main source code of the question and used css3
transition