元素上具有不同延迟的多次转换的语法

Question

我试图通过逐渐（无形地）增加标题的大小以使基础内容向下移动，从而使段落在单击标题时平滑显示，然后在达到最大大小后希望它褪色。但是我在将具有不同延迟的多个过渡应用于同一元素时遇到了一些麻烦。有办法吗？

codepen： Codepen

我已经尝试过了，但是没有用：

-webkit-transition: opacity 0.3s ease-out, ease 0.3s;
-webkit-transition: font-size 0.3s ease-out, ease;