CSS过渡轻松不起作用答案

【问题标题】：CSS Transition Ease not workingCSS过渡轻松不起作用
【发布时间】：2015-07-09 10:30:00
【问题描述】：

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

a 周围的 span 似乎运行良好，所以它在 a 中的所有内容。

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

编解码器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;
}

【问题讨论】：

使用all，您正在为display 属性设置动画，这是不可能的。
即使只是“不透明”的动画似乎也不起作用
我的意思是即使在同一个块中有display 和transition 也是有问题的......
"all" 表示您为所有可动画属性设置动画，而不是 display，因此使用 all 没有问题（除了为所有内容设置动画）。

标签： html css css-animations

【解决方案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;
}

【讨论】：