Ipad eBay平板电脑应用程序是否可以通过常规HTML/CSS创建一个很酷的过渡/动画？

对于曾经在平板电脑设备上使用过易趣应用程序的用户，您可能已经注意到，当您触摸产品时，产品视图会从标准网格视图切换，如下所示：

如下图所示，将所有产品移至左侧导航，并在右侧区域显示触摸产品的详细信息：

真正酷的是将视图从一个变换到另一个的动画。
具体来说，产品图像会缩小一点，然后滑动到左侧导航中的任何位置。（这在实际应用中比我解释要容易得多。）

无论如何，我真的很喜欢这个动画，我希望能够在使用HTML/CSS的网站上创建同样的效果，但我运气不好。
我尝试在屏幕上放置一组相邻的div，并（通过单击按钮）使用CSS3转换来缩小包含div的宽度，但结果是div从一个位置突然跳到另一个位置，没有任何形式的流体动画或运动，这是我理想的选择

如果我想用HTML/CSS实现的目标是不可能的，那没关系，但在我给你答案之前，我想把问题推迟到比我聪明得多的人身上。
如果有人知道怎么做（或者可以肯定地告诉我这是不可能的），我将非常感激

---

谢谢。

在iPad上，您可以使用CSS-webkit transform属性执行此操作

CSS

HTML

---

有关示例，请参见。希望我没弄错你的意思（现在这里没有iPad）。

做所有的细节并不难，只是有点无聊

对于此html

<div class="container">
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
<div id="elem4"></div>
<div id="elem5"></div>
<div id="elem6"></div>
<div id="elem7"></div>
<div id="elem8"></div>
<div id="elem9"></div>
</div>

我已经设置了一个包含9个元素的数组，它将适合3x3的网格。 我已经把第五和第九个放在了它们应该在的位置，并创建了一个动画将它们移动到列表位置

（仅webkit转换）

剩下的任务是为其他7个元素创建动画，并制作动画（使用更多关键帧）

根据你的评论，这是另一种方法

演示是为3列网格准备的。然后，关键是每3个流中只有第一个子流；其余2个因处于绝对位置而无法流动。这允许我们创建基于第n个子元素的通用规则来定位元素

设置动画后，此样式将适应任意数量的元素（并且只需设置设计中列的动画数量）

CSS

---

（仅适用于webkit。只是为了好玩，添加了一些轮换）

不允许使用javascript？任何能让我获得所需结果的东西都是允许的，但最重要的是，我希望它尽可能简单。你有什么想法（有没有JS）？不幸的是，这不是我想要的。很抱歉描述得不好。真的，除非你有一台装有eBay应用程序的平板电脑，而且你自己也能看到这种转变，否则很难想象。不管怎么说，我可以让一切顺利进行，但我真正想要的是让一切从一个视图转移到下一个视图的酷动画。不管怎样，谢谢你。是的，这很有效。我只是希望有一种不用绝对定位的方法（我应该在我原来的帖子中提到）。问题是，在我的情况下，我有一个可变（大）数量的项目，并处理所有这些项目的所有数学（屏幕上的任何其他内容都变得非常棘手，非常容易出错。无论如何，感谢您向我展示这一点。

<div id="menu" style="display:none; background-color: #cccccc;">
    <div>Text</div>
</div>
<div id="main">
    <input type="button" id="menuToggle" value="Toggle" />
</div>

function showMenu() {
    $("#menu").show(0);

    $("#main").addClass('menu-open');
}

function hideMenu() {
    if ($("#main").hasClass('menu-open')) {
        $("#main").removeClass('menu-open');
        setTimeout(function () { $("#menu").hide(); }, 500);
    }
}

$(document).ready(function () {
    var body = $("#main"),
        menuToggle = $('#menuToggle'),
        menu = $("#menu");

    menuToggle.bind('click', function (ev) {
        ev.preventDefault();
        if (body.hasClass('menu-open')) {
            hideMenu();
        } else {
            showMenu();
        }
    });
});

<div class="container">
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
<div id="elem4"></div>
<div id="elem5"></div>
<div id="elem6"></div>
<div id="elem7"></div>
<div id="elem8"></div>
<div id="elem9"></div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid green;
}

.container div {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  background-color: lavender;
}

#elem5 {
  left: 100px;
  top: 100px;
}

.container:hover div {
  -webkit-animation-duration: 3s;
  -webkit-animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
}

#elem5 {
  left: 100px;
  top: 100px;
}

.container:hover #elem5 {
  -webkit-animation-name: an5;
}

@-webkit-keyframes an5 {
  0% {-webkit-transform: scale(1);}
  50% {-webkit-transform: scale(0.33);}
  100% {-webkit-transform: translateX(-133px) scale(0.33);}
}

#elem9 {
  left: 200px;
  top: 200px;
}

.container:hover #elem9 {
  -webkit-animation-name: an9;
}

@-webkit-keyframes an9 {
  0% {-webkit-transform: scale(1);}
  50% {-webkit-transform: scale(0.33);}
  100% {-webkit-transform: translateX(-233px) translateY(33px) scale(0.33);}
}

.container {
  height: 500px;
}

.child {
  width: 100px;
  height: 100px;
  font-size: 40px;
  text-align: center;
  line-height: 90px;
  box-shadow: inset 0px 0px 2px black;
}

.child:nth-child(3n+1) {
     background-color: lightblue;
}

.child:nth-child(3n+2) {
     position: absolute;
     -webkit-transform: translate3d(100px, -100px, 0px);
     background-color: lightgreen;
}

.child:nth-child(3n) {
     position: absolute;
     -webkit-transform: translate3d(200px, -100px, 0px);
     background-color: lightyellow;
}

.container:hover .child {
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-duration: 8s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  width: 300px;
}
.container:hover .child:nth-child(3n+1) {
  -webkit-animation-name: ani1;
}
.container:hover .child:nth-child(3n+2) {
  -webkit-animation-name: ani2;
}
.container:hover .child:nth-child(3n+3) {
  -webkit-animation-name: ani3;
}



@-webkit-keyframes ani1 {
  0% {width: 100px; -webkit-transform: scale(1);}
  50% {width: 300px; -webkit-transform: translate3d(-70px, -20px, 0px) scale(0.33);}
  100% {width: 300px; -webkit-transform: translate3d(-100px, -40px, 0px) scale(0.33);}
}

@-webkit-keyframes ani2 {
  0% {width: 100px;-webkit-transform: translate3d(100px, -100px, 0px) scale(1);}
  50% {width: 300px; -webkit-transform: translate3d(0px, -90px, 0px) scale(0.33);}
  100% {width: 300px; -webkit-transform: translate3d(-100px, -106px, 0px) scale(0.33);}
}
@-webkit-keyframes ani3 {
  0% {width: 100px; -webkit-transform: translate3d(200px, -100px, 0px) scale(1);}
  50% {width: 300px; -webkit-transform: translate3d(80px, -100px, 0px) scale(0.33) rotate(180deg);}
  100% {width: 300px; -webkit-transform: translate3d(-100px, -73px, 0px) scale(0.33)  rotate(359.99deg);}
}