在 https://www.apple.com/switch/ 页面的第七点理由「 Can I get help from a real person?」区块，有一个「向上放大淡入的 Notifications 」动画。
官网用的形状是一张 .png 图片。自己用 CSS 写出图形后，按官网的 CSS 动画添加尝试了一下，结果网页直接呈现动画结束后的目标形态，而没有任何动画播放过程。其中核心部分是（适配用的动画代码和其他样式都加了）：
.变换 { transform: translateY(-70%) scale(0.9); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s, opacity 0.45s ease-out 0.4s, -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s; opacity: 0; }
.变换.后 { transform: translateY(-140%) scale(1); opacity: 1; }
然后将上述两个作为 class 加入 div。网页直接显示结果，无动画过程。然而在 Safari 网页检查器中，手动反复取消／勾选 transform 却有动画效果。
是不是缺少了什么触发机制？完整实现这个动画的做法是？
Select Language