Html 以两种方式制作动画

我正在使用animista动画，我想实现按钮在div块悬停时向左缩放，如果我将鼠标移出div块，按钮将向左缩放

这是我的密码

+
.元素{
背景：红色；
高度：20px；
}
.元素：悬停按钮{
显示器：flex；
-webkit动画：缩放左0.5s立方贝塞尔（0.550、0.085、0.680、0.530）；
动画：缩放左0.5s立方贝塞尔（0.550,0.085,0.680,0.530）二者；
}
.元素按钮{
显示：无；
-webkit动画：缩放左0.5s立方贝塞尔（0.550、0.085、0.680、0.530）二者；
动画：缩放左0.5s立方贝塞尔（0.550,0.085,0.680,0.530）二者；
}
/* ----------------------------------------------
*由Animista于2018-8-30 14:38:13生成
*w:http://animista.net，t:@cssanimista
* ---------------------------------------------- */
@-webkit关键帧在左侧缩放{0%{-webkit变换：缩放（0）；变换：缩放（0）；-webkit变换原点：0 50%；变换原点：0 50%；不透明度：1}100%{-webkit变换：缩放（1）；变换：缩放（1）；-webkit变换原点：0 50%；变换原点：0 50%；不透明度：1}@keyframes在左侧缩放{0%{-webkit变换：缩放（0）；变换：缩放（0）；-webkit变换原点：0 50%；变换原点：0 50%；不透明度：1}100%{-webkit变换：缩放（1）；变换：缩放（1）；-webkit变换原点：0 50%；变换原点：0 50%；不透明度：1}
@-webkit关键帧向左向外缩放{0%{-webkit变换：缩放（1）；变换：缩放（1）；-webkit变换原点：0 50%；变换原点：0 50%；不透明度：1}100%{-webkit变换：缩放（0）；变换：缩放（0）；-webkit变换原点：0 50%；变换原点：0 50%；不透明度：1}@keyframes向左缩放{0%{-webkit变换：缩放（1）；变换：缩放（1）；-webkit变换原点：0 50%；变换原点：0 50%；不透明度：1}100%{-webkit变换：缩放（0）；变换：缩放（0）；-webkit变换原点：0 50%；变换原点：0 50%；不透明度：1}

---

Display:none和Display:flex对我来说是强制性的。

对于缩放动画，你不应该给出

Display:none

。它会立即隐藏按钮而不显示动画

---

相反，您可以使用javascript在特定超时后设置显示：无。

您不需要使用显示：无属性。显示无；不接受动画属性

<div class="element">
  <button>
  +
 </button>
</div>

.element {
  background: red;
  height: 20px;
}

.element:hover button {
  display: flex;
    -webkit-animation: scale-in-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: scale-in-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.element button {
    -webkit-animation: scale-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: scale-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
* Generated by Animista on 2018-8-30 14:38:13
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
@-webkit-keyframes scale-in-left{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}@keyframes scale-in-left{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}
@-webkit-keyframes scale-out-left{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}@keyframes scale-out-left{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}

+
.元素{
背景：红色；
高度：20px；
}
.元素：悬停按钮{
显示器：flex；
-webkit动画：缩放左0.5s立方贝塞尔（0.550、0.085、0.680、0.530）；
动画：缩放左0.5s立方贝塞尔（0.550,0.085,0.680,0.530）二者；
}
.元素按钮{
-webkit动画：缩放左0.5s立方贝塞尔（0.550、0.085、0.680、0.530）二者；
动画：缩放左0.5s立方贝塞尔（0.550,0.085,0.680,0.530）二者；
}
/* ----------------------------------------------
*由Animista于2018-8-30 14:38:13生成
*w:http://animista.net，t:@cssanimista
* ---------------------------------------------- */
@-webkit关键帧在左侧缩放{0%{-webkit变换：缩放（0）；变换：缩放（0）；-webkit变换原点：0 50%；变换原点：0 50%；不透明度：1}100%{-webkit变换：缩放（1）；变换：缩放（1）；-webkit变换原点：0 50%；变换原点：0 50%；不透明度：1}@keyframes在左侧缩放{0%{-webkit变换：缩放（0）；变换：缩放（0）；-webkit变换原点：0 50%；变换原点：0 50%；不透明度：1}100%{-webkit变换：缩放（1）；变换：缩放（1）；-webkit变换原点：0 50%；变换原点：0 50%；不透明度：1}
@-webkit关键帧向左向外缩放{0%{-webkit变换：缩放（1）；变换：缩放（1）；-webkit变换原点：0 50%；变换原点：0 50%；不透明度：1}100%{-webkit变换：缩放（0）；变换：缩放（0）；-webkit变换原点：0 50%；变换原点：0 50%；不透明度：1}@keyframes向左缩放{0%{-webkit变换：缩放（1）；变换：缩放（1）；-webkit变换原点：0 50%；变换原点：0 50%；不透明度：1}100%{-webkit变换：缩放（0）；变换：缩放（0）；-webkit变换原点：0 50%；变换原点：0 50%；不透明度：1}

预期结果是什么？要使+按钮在悬停时同时出现在div的左侧和右侧？

<div class="element">
  <button>
  +
 </button>
</div>

.element {
  background: red;
  height: 20px;
}

.element:hover button {
  display: flex;
    -webkit-animation: scale-in-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: scale-in-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.element button {
    -webkit-animation: scale-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: scale-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
* Generated by Animista on 2018-8-30 14:38:13
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
@-webkit-keyframes scale-in-left{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}@keyframes scale-in-left{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}
@-webkit-keyframes scale-out-left{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}@keyframes scale-out-left{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}