CSS 过渡缓解不起作用

Question

我希望圆圈中心的图标在选中复选框时淡入并变大。

a 周围的 span 似乎运行良好，a 中的所有内容也是如此。

出于某种原因，过渡：缓入缓出不会为 height/width/opacity 设置动画 - 即使我将属性设置为 all。

CODEPEN http://codepen.io/abenjamin/pen/LVVpwX

html

<input type="checkbox" id="menu-toggle" name="menuToggle"/>
  <label for="menu-toggle"><span><a href="#"><i class="fa fa-dribbble">
          <figure>3</figure></i></a></span><span><a href="#"><i class="fa fa-facebook">
          <figure>99+</figure></i></a></span><span><a href="#"><i class="fa fa-twitter">
          <figure>3</figure></i></a></span>
    <p>share</p>
  </label>

CSS

#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;
}

Answer 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;
}

CSS 过渡缓解不起作用

CSS Transition Ease not working

html

css

css-animations