CSS动画延迟和持续时间的问题

Question

我对CSS动画有疑问。我想要一个x秒的延迟，然后是y秒的持续时间，它应该保持在结束状态。我做了一些CSS，它的工作。我添加了浏览器前缀，现在等待延迟，但是效果突然出现了-没有持续时间。我有这个例子：

我用Google搜索了几个小时，但找不到任何解决方案。

#upper_left_triangle {
  animation: fadein 2s;
  -moz-animation: fadein 2s; /* Firefox */
  -webkit-animation: fadein 2s; /* Safari and Chrome */
  -webkit-animation-delay: 20s;
          animation-delay: 20s;
  -o-animation: fadein 2s; /* Opera */
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes fadein {
  from {
      opacity:0;
  }
  to {
      opacity:1;
  }
}

@keyframes fadein {
  from {
      opacity:0;
  }
  to {
      opacity:1;
  }
}

我想创建一个小提琴，但是在小提琴中它可以工作...但是在Firefox（我的第一个测试浏览器）中，它不起作用。