CSS 动画不会播放，直接显示目标结果。

islujw 2017-05-29 20:44:17 +08:00 3912 次点击

这是一个创建于 3071 天前的主题，其中的信息可能已经有所发展或是发生改变。

在 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 却有动画效果。

是不是缺少了什么触发机制？完整实现这个动画的做法是？

动画

Transform

opacity

CSS

6 条回复 2017-05-30 11:39:18 +08:00

wdhwg001

2017-05-29 23:29:37 +08:00 via iPhone

我记得 prefix 不能写在一条里的吧，而且 prefix 的有点迷，顺便不能排下版么

dremy

2017-05-30 00:30:26 +08:00 via Android

transition 是过度，animation 才是动画。
前者是在相应属性发生变化时才触发过度效果，而后者可以直接播放动画效果

islujw

2017-05-30 01:40:54 +08:00

@wdhwg001 网页端是纯文本的，我已经换行了，但发出后被调整为连续的。

islujw

2017-05-30 01:49:35 +08:00

@dremy 明白了，谢谢。但在官网那段，没有搜索到那一条的任何 animation 代码，倒是其他条的有。

linking

2017-05-30 09:40:32 +08:00

@islujw 用 js 动态添加变换后的 class 就可以看到动画效果了

LevonLin

2017-05-30 11:39:18 +08:00 via Android

transition 是过渡，动效要在元素属性变化（即 CSS 中匹配到新的选择器）后发生。一般通过指定 hover 等交互伪类，或 js 改变类名来实现过渡效果。