我已经设置了这样的CSS3动画:
@-webkit-keyframes slidein {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(0); }
}
如何在类定义上反转此动画？
例如:
.slideinTransition {
-webkit-animation-name: slidein;
-webkit-animation-direction: alternate;
}
这将在第二次迭代时反转动画,我想在第一次迭代时直接反转它.
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>HAHAHA</title>
<STYLE TYPE="text/css" media="screen">
*
{
padding: 0;
margin: 0;
}
body
{
padding: 0;
margin: 0;
}
#flexbox
{
//display: -webkit-box;
//-webkit-box-orient: horizontal;
//-webkit-box-align: stretch;
//width: auto;
}
</STYLE>
</head>
<BODY style="padding:0;margin:0;border:0;">
<!--<div id="flexbox">
<img src="1.jpg" width="100px" style="padding:0;margin:0;"/>
<img src="1.jpg" width="100px"/>
<img src="1.jpg" width="100px"/>
</div>-->
<img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/>
<img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/>
</BODY>
</html>
为什么这些图像之间总是有一个小空间,即使我在主体和页面中的所有其他元素上设置了填充和边距为0？
好的,这是完整的未经编辑的代码.
编辑:刚刚发现它在两个IMG之间的换行符.所以......我不能在两个元素之间输入？大声笑... :)
第一个链接是flexbox 2009模型:
<div style="display:-webkit-box;height:100%">
<div style="background:#f00;width:50px">
</div>
<div style="display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;background:#0f0;-webkit-box-flex:1;overflow-Y:scroll">
<div style="background:#000;width:10px;height:300px">
HELLO
</div>
</div>
<div style="background:#f00;width:50px">
</div>
第二个是修订后的2011 - 2012版本:
<div style="display:-webkit-flex;height:100%">
<div style="background:#f00;width:50px">
</div>
<div style="display:-webkit-flex;-webkit-align-items:center;-webkit-justify-content:center;background:#0f0;-webkit-flex:1;overflow-Y:scroll">
<div style="background:#000;width:10px;height:300px">
HELLO
</div>
</div>
<div style="background:#f00;width:50px">
</div>
如果你垂直调整结果大小,你会看到较新的flex模型中的"HELLO"消失,如果你向下滚动,它会给你一个底部空白区域.另一方面,旧的flex模型表现正常.
在最新的Chrome v26.0.1410.65中有什么方法吗？
任何想法为什么无论我分配给iframe的高度,它都不会调整大小？我正在iPhone上测试它(在桌面浏览器上它正确调整大小).
<iframe width="320" height="180" src="http://www.youtube.com/embed/wwbKu0mznf4" frameborder="0"></iframe>
javascript ×2
animation ×1
css ×1
css3 ×1
flexbox ×1
html ×1
html5 ×1
image ×1
iphone ×1
transition ×1
webkit ×1
youtube-api ×1