CSS显示：使用jquery addClass内联动画不起作用

这是代码笔：

如果您注意到，有两个动画：

显示三明治

和

大扩展

。我无法让

展示三明治

动画工作

这是jquery：

$('.button').click(function(){
  $('.container').addClass('animate_sandwich');
  $(this).addClass('large-expansion');
})

这个想法是当我单击一个按钮时，它将同时为

.container

和

.button

设置动画。我希望容器显示（

display:inline；

）。但是，当我单击按钮时，它不会显示。 我知道我可以在没有

动画的情况下实现同样的效果。我可以把
display:inline
放在
.animate\u sandwich
类中，但我计划在
display:inline
之外添加更多动画，我必须通过动画让它工作

我做错了什么？
无法设置
显示属性的动画。要获得想要的效果，可以设置
不透明度
属性的动画：

.container {
  position: absolute;
  background: $sandwich_container;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  top: 50%;
  left: 25%;
  transform: translateX(-50%) translateY(-50%);
  display: inline;
  opacity: 0;
}

.animate_sandwich {
  animation: reveal-sandwich 1s ease-out 1 forwards;
}

@keyframes reveal-sandwich {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 1;}
}

问题在于无法设置
显示属性的动画

如果要设置动画，可以使用
opacity
：


这是对css的更改：

.container {
  ...
  opacity: 0;
  display: inline;
}


@keyframes reveal-sandwich {
    0% {opacity: 0}
    50% {opacity: 100;}
    100% {opacity: 100;}
}

知道了。我从来不知道。我想这是有道理的，因为display不接受数字值-使用
@关键帧
display:none/inline/block/&c
是没有意义的。谢谢很高兴我能帮忙！这是一个好看的汉堡顺便说一句：）谢谢！！我妻子在这家连锁店工作，所以我想为她做点有趣的事：）