动画媒体查询

如果您在某个元素上应用了特定支持属性的 过渡，并且该属性曾经发生变化，它将使用该过渡。如果该元素上的类名发生变化，并且新类更改了该属性，它将过渡（假设该类的作用不是删除过渡）。如果 JavaScript 从字面上更改该样式属性，它将过渡。

同样，如果新的媒体查询生效，并且该媒体查询中包含某些内容更改了该元素上的该属性，它将过渡。 因此，与其说存在“动画媒体查询”，不如说当新的媒体查询开始影响页面时，元素只是按预期过渡。

简单示例

.thing-that-moves {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  top: 0;
  left: 0;
  transition: left 0.5s; /* BYO prefixes */
}
@media (min-width: 400px) {
  left: 50px;
}
@media (min-width: 600px) {
  left: 100px;
}

如果您要在这些断点之间调整浏览器窗口的大小，您会看到一个红色正方形作为响应四处移动。

稍微复杂一点的布局示例

在 CSS-Tricks 的几个版本之前，我有一个搜索表单，它会使用这种精确的技术缓慢地浮动到指定位置。我在这里在一个相对简单的布局中重新创建了它，其中其他一些内容也会过渡。

查看 Chris Coyier 在 CodePen 上的笔 动画媒体查询（@chriscoyier）。

您可能最适合在 全页面视图 中查看它。

动画 GIF 演示效果

附言：LICEcap 非常适合创建类似的 GIF。

我还能做什么？

这里的天空是无限的。它只是 CSS。更改和转换您想要的任何内容。在 CSS-Tricks 的另一个版本中，我 绘制了 来自 Treehouse 的 Mike 青蛙，使用简单的 CSS 形状。当不同的媒体查询生效时，Mike 会 改变形状、颜色、表情和位置——通过过渡缓慢地变形到下一个状态。它很受欢迎！

浏览器支持情况如何？

IE 9+ 支持媒体查询。IE 10+ 支持过渡。我不太担心过渡，因为它们仅仅是装饰作用（如果它们不过渡，也没关系，它们仍然会移动）。如果您需要更深入的媒体查询支持，始终可以使用 Respond.js。

这样做有什么实际意义吗？

为了好玩，伙计。这纯粹是为了娱乐。它可以作为一个小小的点缀，让您的网站充满活力。很难为此制定商业案例，但如果您的性能预算没有几个字节用于娱乐，我替你感到难过，孩子。

需要注意什么吗？

如果样式表解析得足够快，并且过渡在页面 仍在布局 时应用于元素，这些过渡可能会有点令人讨厌。您可能希望 仅在页面加载后 应用它们。