Html CSS转换不起作用

当复选框为：checked时，我希望圆圈中心的图标淡入并增长

a

周围的

span

似乎工作得很好，因此它可以处理

a

中的所有内容

出于某种原因，transition:ease-in-out不会设置高度/宽度/不透明度的动画-即使我将属性设置为

all

代码笔

html

---

不幸的是，如果切换“显示”属性，动画将无法工作。如果需要隐藏元素，请通过设置其他属性（如可见性）来实现。只需将显示器从选中状态移除即可解决问题

#menu-toggle + label span a {
  display: block; /* Just for styling */
  height: 10px;
  width: 10px;
  opacity: 0.3;
  text-align: center;
  text-decoration: none;
  color: #3F7CAC;
  margin: 0 auto;
  overflow: hidden;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}


#menu-toggle:checked + label span a {
  line-height: 50px;
  font-size: 20px;
  border: 1px solid #3F7CAC;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  box-sizing: border-box;
  opacity: 1;
}

---

使用

all

可以设置

display

属性的动画，这是不可能的。即使仅设置“不透明度”的动画似乎也不起作用。我的意思是，即使在同一块中设置

display

和

transition

也是有问题的…”“all”表示可以设置所有可设置动画的属性的动画，display则不起作用，因此，使用all（除了为所有内容设置动画）没有问题。

#menu-toggle + label span a {
  display: none;
  height: 10px;
  width: 10px;
  opacity: 0.3;
  text-align: center;
  text-decoration: none;
  color: #3F7CAC;
  margin: 0 auto;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}


#menu-toggle:checked + label span a {
  display: block;
  line-height: 50px;
  font-size: 20px;
  border: 1px solid #3F7CAC;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  box-sizing: border-box;
  opacity: 1;
}

#menu-toggle + label span a {
  display: block; /* Just for styling */
  height: 10px;
  width: 10px;
  opacity: 0.3;
  text-align: center;
  text-decoration: none;
  color: #3F7CAC;
  margin: 0 auto;
  overflow: hidden;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}


#menu-toggle:checked + label span a {
  line-height: 50px;
  font-size: 20px;
  border: 1px solid #3F7CAC;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  box-sizing: border-box;
  opacity: 1;
}