加载CSS图像加载

我对此非常难过，希望有人能帮上忙。加载CSS图像加载

我有一个页面背景，在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; 
}

但没有按” t似乎工作。

任何帮助，将不胜感激。

来源

2014-12-02 Aaron Fernandes

这将需要一些JS魔法。你总是可以检查他们的代码来获得一些想法。 – 2014-12-02 21:26:39

什么是您的html文档类型？我们可以得到你的html的例子吗？一个html代码片段应该改进我们可以提供的答案。 – Ligemer 2014-12-02 21:27:01

我相信它可以用纯CSS完成:) – Tobson 2014-12-02 21:30:57

你可以使用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" />

来源

2014-12-02 21:31:03 apaul

这样做将被设置在图像转换版本的初始状态的最好方法，应用transition它作为那么，然后使用JavaScript来添加一个将转换设置回“正常”状态（未转换）的类。

通过这种方式可以轻松跟踪状态，并且可以在两种状态之间切换，而无需在两者之间跳转。 Demo（该onload通过的jsfiddle在演示处理 - 你需要它自己添加在你的代码）

否则，你可以使用上负载的关键帧动画与animation-direction:forwards了从转化的状态变为非转化的状态。如果你所做的只是对初始页面加载的影响，那很好，但如果要更加交互，你应该使用transition。

来源

2014-12-02 21:33:08

加载CSS图像加载

回答

相关问题