Tag: cssanimation

在safari中不能使用CSS3animation: 我有一些CSS3animation，在Safari浏览器中支持CSS3的所有浏览器都能正常工作。奇怪是不是？好的这里是我的代码： HTML <div class="right"> <div class="key-arm"><img src="images/landing/key-arm.png" alt="arm" /></div> </div> CSS .landing .board .right { width: 291px; height: 279px; background: url('..http://img.dovov.comlanding/key-pnl.png'); bottom: 16px; right: 250px; position: absolute; } .landing .board .right .key-arm { position: absolute; left: 44px; top: 18px; width: 41px; height: 120px; } /*=== Key Arm Animation ===*/ @-webkit-keyframes keyarm { 0% […]

Webkit的CSSanimation问题 – 坚持animation的结束状态？: 鉴于以下CSS3animation…. <style type="text/css" media="screen"> .drop_box { -webkit-animation-name: drop; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; } @-webkit-keyframes drop { from { -webkit-transform: translateY(0px); } to { -webkit-transform: translateY(100px); } } </style> <div class="drop_box"> Hello world </div> 世界您好世界文本animation如预期下降100px。但是，在animation结束时，它会跳回原来的位置。显然这在CSSland中是有意义的。 animation已经被应用，不再作用于元素，所以原始样式生效。这对我来说似乎有点奇怪 – 当然，如果一个animation元素到位，那么人们会期望放置持续？有没有什么办法让结束位置“粘性”，而不必诉诸于JavaScript来标记一个类名或样式到animation结尾的元素来修复其改变的属性？我知道转换依然存在，但对于我所讨论的animation（这个例子只是为了演示的目的）转换并不能提供所需的控制级别。如果没有这个，看起来复杂的animation只能用于元素最终回到原始状态的循环过程。

内容滚动到视图时激活CSS3animation: 我有一个条形图，animationCSS3和animation当前激活页面加载。我的问题是给定的条形图由于之前有很多内容而被放置在屏幕之外，所以当用户向下滚动时，animation已经完成。我正在寻找通过CSS3或jQuery的方式，只有当查看器查看图表时才激活条形图上的CSS3animation。 <div>lots of content here, it fills the height of the screen and then some</div> <div>animating bar chat here</div> 如果您在页面加载后向下滚动，您可以看到它的animation。这是我的代码jsfiddle 。此外，我不知道这是否重要，但我有这个条形图在页面上的几个实例。我遇到了一个名为waypoint的jQuery插件，但我绝对没有运气让它工作。如果有人能把我指向正确的方向，这将是非常有益的。谢谢！

在CSS3animation结束时保持最终状态: 我在一些设置为opacity: 0;元素上运行animationopacity: 0; 在CSS中。 animation类应用onClick，并使用关键帧将不透明度从0更改为1 （等等）。不幸的是，当animation结束时，元素会回到opacity: 0 （在Firefox和Chrome中）。我的自然思想是animation元素保持最终状态，压倒他们的原始属性。这是不是真的？如果没有，我怎么能得到这样的元素呢？代码（不包括前缀版本）： @keyframes bubble { 0% { transform:scale(0.5); opacity:0.0; } 50% { transform:scale(1.2); opacity:0.5; } 100% { transform:scale(1.0); opacity:1.0; } }