css - CSS 如何将元素从一个点移开？

Question

我正在尝试使用 CSS 模拟 Instagram 的特殊效果。在 Instagram 中，点击一组照片会使每张照片变大并飞离原来的位置。

目前我只会做成长部分。我不知道如何让它们从原始点开始翻译。

HTML

<div id="photoSet">
   <img src="1.jpg" />
   <img src="2.jpg" />
   <img src="3.jpg" />
</div>

CSS

@-moz-keyframes fly {
    from {
       -moz-transform: scale(0.5);
    }
    to {
       -moz-transform: scale(1.0);
    }
}

img {
   -moz-animation: fly 1s;
}

Answer 1

在这种情况下，您需要为 left 和 top 属性设置动画。不幸的是，您需要为您计划转换的每个元素使用一个类/选择器，以及一个单独的。然后，您可以为通用选择器设置 transition: left 0.2s, top 0.2s;。只需更改每个类的类名即可调用转换:

.photo { 
  transition: left 0.2s, top 0.2s;
  position: absolute;
  left: 0;
  top: 0;
}
.photo.photo1 { left: 0; top: 0; }
.photo.photo2 { left: 50px; top: 0; }
.photo.photo3 { left: 100px; top: 0; }
/* etc */
.photo.photo6 { left: 100px; top: 50px; }

这有一个缺点，即一些渲染引擎实际上硬件加速左/上转换。