如何用 CSS 制作凹面动画答案

【问题标题】：How to make concave animation with CSS如何用 CSS 制作凹面动画
【发布时间】：2017-02-27 23:55:51
【问题描述】：

所以，我的侧边栏只显示它的一些内容，当它悬停时它会显示所有侧边栏的宽度。

.sidenav {
  height: 100%;
  width: 100px;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow: hidden;
  padding-top: 20px;
  transition: 0.8s;
  opacity: 0.8;
  box-shadow: 0px 20px 50px black;
  border-radius: 0;
  background: black;
}

.sidenav:hover {
  width: 215px;
  overflow: hidden;
  animation-name: roundborder;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

@keyframes roundborder {
    0%   { border-radius: 0; }
    50%  { border-radius: 0 50% 50% 0; }
    100% { border-radius: 0; }
}

&lt;div class="sidenav"&gt;&lt;/div&gt;

我的问题是，如果侧边栏没有悬停，如何制作凹形动画？所以在它悬停并且指针不再在侧边栏中之后，它会回到初始状态但有凹动画，我不能使用负百分比，那我用它做什么呢？谢谢

【问题讨论】：

相关：Is a concave border radius possible?
但我的问题是动画，就像我的例子一样。我将在.sidenav@MatheusAvellar 上使用它
我会推荐一些类似于tessi 所说的内容，使用::before 和::after 来模拟凹形边框。您也可以将其调整为在动画中使用

标签： html css css-transitions css-animations

【解决方案1】：

我猜你必须与 SVG 你创建一个普通的正方形，然后两个

动画第一个是圆角，第二个是

凹角。

【讨论】：

很抱歉回复晚了，但我的意思是，当圆形边框激活时，形状是凹的而不是凸的
好的，我认为不可能像这样你必须创建一个 SVG 并对其进行动画处理，我认为这是唯一的方法

【解决方案2】：

也许我误解了这个问题，但你能不能把相同的动画放在 div 上（没有：悬停）。像这样：

.sidenav {
  height: 100%;
  width: 100px;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow: hidden;
  padding-top: 20px;
  transition: 0.8s;
  opacity: 0.8;
  box-shadow: 0px 20px 50px black;
  border-radius: 0;
  background: black;
  animation-name: roundborder2;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

.sidenav:hover {
  width: 215px;
  overflow: hidden;
  animation-name: roundborder;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

@keyframes roundborder {
    0%   { border-radius: 0; }
    50%  { border-radius: 0 50% 50% 0; }
    100% { border-radius: 0; }
}
@keyframes roundborder2 {
    0%   { border-radius: 0; }
    50%  { border-radius: 0 50% 50% 0; }
    100% { border-radius: 0; }
}

&lt;div class="sidenav"&gt;&lt;/div&gt;

【讨论】：