Html CSS从中心的过渡宽度

好的，当悬停在父对象上时，我希望容器从中心打开到指定的宽度

问题是我不能让它不从左边打开。我希望它的工作方式与之类似

如果可能的话，我希望容器角的动画在完成第一个动画后激活

正文{
背景：#4e4e；
}
#音乐{
位置：绝对位置；
顶部：5px；
左：计算（50%-50px）；
宽度：50px；
高度：50px；
边框：1px纯白；
背景色：#000；
不透明度：1；
-webkit过渡：所有0.8秒轻松；
-moz转换：所有0.8秒的易用性；
过渡：所有0.8秒缓解；
}
#音乐：悬停{
-moz边界半径：100px；
-webkit边界半径：100px；
边界半径：100px；
}
#音乐img{
高度：30px；
宽度：30px；
边缘顶部：10px；
}
#音乐：悬停。音乐容器{
-moz边界半径：10px；
-webkit边界半径：10px；
高度：23px；
宽度：210px；
边缘顶部：8px；
不透明度：1；
背景色：#000；
颜色：#000；
-webkit过渡：所有0.8秒轻松；
-moz转换：所有0.8秒的易用性；
过渡：所有0.8秒缓解；
}
.音乐容器{
高度：23px；
宽度：0px；
位置：绝对位置；
背景色：#000；
左侧填充：10px；
边框：1px纯白；
左边距：-85px；
边缘顶部：8px；
溢出：隐藏；
不透明度：0；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
过渡：所有0.5s缓解；
}

JSFIDLE无法加载我的音乐lol

您可以实现转换

转换：缩放

而不是

宽度

正文{
背景：#4e4e；
}
#音乐{
位置：绝对位置；
顶部：5px；
左：计算（50%-50px）；
宽度：50px；
高度：50px；
边框：1px纯白；
背景色：#000；
不透明度：1；
-webkit过渡：所有0.8秒轻松；
-moz转换：所有0.8秒的易用性；
过渡：所有0.8秒缓解；
}
#音乐：悬停{
-moz边界半径：100px；
-webkit边界半径：100px；
边界半径：100px；
}
#音乐img{
高度：30px；
宽度：30px；
边缘顶部：10px；
}
#音乐：悬停。音乐容器{
-moz边界半径：10px；
-webkit边界半径：10px；
高度：23px；
宽度：210px；
边缘顶部：8px；
不透明度：1；
背景色：#000；
颜色：#000；
-webkit过渡：所有0.8秒轻松；
-moz转换：所有0.8秒的易用性；
过渡：所有0.8秒缓解；
变换：比例（1）；
}
.音乐容器{
高度：23px；
宽度：210px；
变换：比例（0）；
位置：绝对位置；
背景色：#000；
左侧填充：10px；
边框：1px纯白；
左边距：-85px；
边缘顶部：8px；
溢出：隐藏；
不透明度：0；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
过渡：所有0.5s缓解；
}

JSFIDLE无法加载我的音乐lol

您可以实现转换

转换：缩放

而不是

宽度

正文{
背景：#4e4e；
}
#音乐{
位置：绝对位置；
顶部：5px；
左：计算（50%-50px）；
宽度：50px；
高度：50px；
边框：1px纯白；
背景色：#000；
不透明度：1；
-webkit过渡：所有0.8秒轻松；
-moz转换：所有0.8秒的易用性；
过渡：所有0.8秒缓解；
}
#音乐：悬停{
-moz边界半径：100px；
-webkit边界半径：100px；
边界半径：100px；
}
#音乐img{
高度：30px；
宽度：30px；
边缘顶部：10px；
}
#音乐：悬停。音乐容器{
-moz边界半径：10px；
-webkit边界半径：10px；
高度：23px；
宽度：210px；
边缘顶部：8px；
不透明度：1；
背景色：#000；
颜色：#000；
-webkit过渡：所有0.8秒轻松；
-moz转换：所有0.8秒的易用性；
过渡：所有0.8秒缓解；
变换：比例（1）；
}
.音乐容器{
高度：23px；
宽度：210px；
变换：比例（0）；
位置：绝对位置；
背景色：#000；
左侧填充：10px；
边框：1px纯白；
左边距：-85px；
边缘顶部：8px；
溢出：隐藏；
不透明度：0；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
过渡：所有0.5s缓解；
}

JSFIDLE无法加载我的音乐lol

使用此css而不是

左：计算（50%-50px）

我在

#music

id中为中心添加了这个css。另外，在css中添加和更改鼠标悬停，请检查此项

#music {  
 left:0;
 right:0;
 margin: 0 auto;
}
#music:hover .music-container {   
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}    
.music-container {
  height: 23px;
  width: 210px;
  position: absolute;
  background-color: #000;
  padding-left: 10px;
  border: 1px solid white;
  margin-left: -85px;
  margin-top: 8px;
  overflow: hidden; 
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  left:0;
  right:0;
  border-radius: 10px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

正文{
背景：#4e4e；
}
#音乐{
位置：绝对位置；
顶部：5px；
左：0；
右：0；
保证金：0自动；
宽度：50px；
高度：50px；
边框：1px纯白；
背景色：#000；
不透明度：1；
-webkit过渡：所有0.8秒轻松；
-moz转换：所有0.8秒的易用性；
过渡：所有0.8秒缓解；
}
#音乐：悬停{
-moz边界半径：100px；
-webkit边界半径：100px；
边界半径：100px；
}
#音乐img{
高度：30px；
宽度：30px；
边缘顶部：10px；
}
#音乐：悬停。音乐容器{
-webkit转换：scaleX（1）；
变换：scaleX（1）；
}
.音乐容器{
高度：23px；
宽度：210px；
位置：绝对位置；
背景色：#000；
左侧填充：10px；
边框：1px纯白；
左边距：-85px；
边缘顶部：8px；
溢出：隐藏；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
左：0；
右：0；
边界半径：10px；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
过渡：所有0.5s缓解；
}

JSFIDLE无法加载我的音乐lol

使用此css而不是

左：计算（50%-50px）

我在

#music

id中为中心添加了这个css。另外，在css中添加和更改鼠标悬停，请检查此项

#music {  
 left:0;
 right:0;
 margin: 0 auto;
}
#music:hover .music-container {   
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}    
.music-container {
  height: 23px;
  width: 210px;
  position: absolute;
  background-color: #000;
  padding-left: 10px;
  border: 1px solid white;
  margin-left: -85px;
  margin-top: 8px;
  overflow: hidden; 
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  left:0;
  right:0;
  border-radius: 10px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

正文{
背景：#4e4e；
}
#音乐{
位置：绝对位置；
顶部：5px；
左：0；
右：0；
保证金：0自动；
宽度：50px；
高度：50px；
边框：1px纯白；
背景色：#000；
不透明度：1；
-webkit transitio