Question

我很难过，希望有人可以提供帮助。

我有一个页面背景，用HTML完成，并显示客户的Instagram照片。使用此插件：justifiedgrid.com

客户端非常希望图像在页面加载时翻转，如http://www.starworksartists.com/hair/adir-abergel/instagram/

我尝试过将CSS添加到图像中

.jig-loaded  img {
    transition: 0s cubic-bezier(0.175, 0.885, 0.32, 1.1) !important;
    transform: rotateY(0deg) translateX(0px) !important;
    opacity: 1;
}

但似乎没有用。

任何帮助都将不胜感激。

Answer 1

您可以使用css关键帧动画：

img {
  -webkit-animation: flip 1s;
  animation: flip 1s;
}
@-webkit-keyframes flip {
  from {
    transform: rotateY(90deg)
  }
  to {
    transform: rotateY(0deg)
  }
}
@keyframes flip {
  from {
    transform: rotateY(90deg)
  }
  to {
    transform: rotateY(0deg)
  }
}

<img src="http://i.stack.imgur.com/vNQ2g.png?s=128&g=1" />

Answer 2

执行此操作的最佳方法是将图像的初始状态设置为已转换的版本，同时对其应用transition，然后使用JavaScript添加一个类，将转换设置回“正常”状态（未转变）。

通过这种方式，您可以轻松跟踪状态，并且可以在两种状态之间切换而不会跳跃。 Demo（onload由JSFiddle在演示中处理 - 你需要在代码中自己添加它）

否则，您可以使用animation-direction:forwards加载关键帧动画，从转换状态转换到非转换状态。如果您所做的只是对初始页面加载产生影响，那么它很好，但是如果它更具互动性，则应该使用transition代替。

加载CSS图像翻转

2 个答案: