Tag: cssanimation

在页面加载的第一个“焦点”事件Safari浏览器抖动/跳跃（bug？）

我目前正在对付Safari上令人沮丧的错误，我不知道还有什么可以转身的。 看起来会触发focus事件的大多数元素（但不是全部，也不能识别区分因素）会导致页面上所有被转换或animation的元素跳转到顶部和左侧〜2px。 这只发生在页面加载后的第一个焦点事件上。 看到这个bug，有点烦人，因为它在droplr.com的login部分，而且我完全无法在JSFiddle上提炼出一个简单的例子。 如果你有/创build一个账户并login，点击这个编辑图标进行删除： 你会看到，在页面的第一个焦点，事情抖动。 下面是时间线，当页面上有一个单独的下拉菜单时，我将焦点放在一个有问题的元素上： 随着更多的下降，它只是更多的相同，但似乎最多约40个油漆。 而剖析器并没有暗示任何有害的东西。 只是通过jQuery内部旅行。 如果不是通过translate3d或matix3d来布局元素，我只需要使用top和left ，这个bug就会消失。 经过几小时和几个小时的debugging，我完全失去了。 希望有人看到类似的东西，可以看看，或者可以给我build议debugging下一步。 非常感谢！ 更新：戴夫德桑德罗build议这是3D加速踢，所以我试着用一个translate来代替，果然，这并没有造成抖动。 我不知道为什么硬件加速会通过focus事件引发，只有一次。 我已经尝试在页面加载中设置一个0的transformZ，继续增加硬件，但在那里也没有运气。 欢迎任何更多的想法。

如何防止css3animation重置完成后？

我写了一个css3animation，它只执行一次。 animation效果很好，但animation完成后会重置。 我怎样才能避免这一点，我想保持结果，而不是重置它。 $(function() { $("#fdiv").delay(1000).addClass("go"); }); #fdiv { width: 10px; height: 10px; position: absolute; margin-left: -5px; margin-top: -5px; left: 50%; top: 50%; background-color: red; } .go { -webkit-animation: spinAndZoom 1s 1; } @-webkit-keyframes spinAndZoom { 0% { width: 10px; height: 10px; margin-left: -5px; margin-top: -5px; -webkit-transform: rotateZ(0deg); } 100% { width: 400px; height: 400px; […]

animation后CSSanimation属性保持不变

我想获得一个CSSanimation属性留完后，这是可能的吗？ 这是我想要实现的… 元素在用户登陆页面时应该隐藏，3秒（或其他）后，它应该淡入，一旦animation完成，它应该呆在那里。 这是一个小提琴的尝试… http://jsfiddle.net/GZx6F/ 这里是保存的代码… <h2>Test</h2> <style> @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0.9; } } h2 { animation: fadeIn 1s ease-in-out 3s; } </style> 我知道如何做到这一点与jQuery ..这将是这样的… <h2>test</h2> <script> $(document).ready(function(){ $('h2').hide().delay(3000).fadeIn(3000) }); </script>

hover时连续的CSS旋转animation，hover在0deg上的animation

当你无限期地hover在它上面时，我有一个元素会旋转。 当你hover，animation停止。 简单： @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .elem:hover { -webkit-animation-name: rotate; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } 但是，当你hover时，animation突然停止，回到0度。 我想回到那个位置，但是在编写语法时遇到一些麻烦。 任何input将是真棒！

CSSanimation延迟重复

我最近发现如何“正确地”使用CSSanimation（以前我把它们解释为不能像JavaScript那样制作复杂的序列）。 所以现在我正在学习他们。 为了达到这个效果，我试图在一个进度条状的元素上使用渐变“flare”。 类似于本机Windows Vista / 7进度条上的效果。 @keyframes barshine { from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);} to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);} } .progbar { animation: barshine 1s 4s linear infinite; } 正如你所看到的，我试图延迟4秒，然后在1秒内扫过一遍，重复一遍。 但是， animation-delay似乎只适用于第一次迭代，之后闪耀只是反复扫描。 我“解决”这个问题如下： @keyframes expbarshine { from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);} 80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);} to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);} } .progbar { […]

使用CSS变换后模糊的文本：scale（）; 在Chrome中

似乎Google Chrome最近有一个更新，在进行transform: scale()后会导致模糊的文本transform: scale() 。 具体来说，我正在这样做： @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } 如果您在Chrome中访问http://rourkery.com ，则应该在主文本区域中看到问题。 它并没有用来做到这一点，它似乎并没有影响其他的webkit浏览器（如Safari）。 还有一些关于人们遇到与3D变换类似的问题的其他post，但没有find像这样的2D变换的任何东西。 任何想法将不胜感激，谢谢！

无论如何，animation用CSSanimation的省略号？

我试图让一个省略号animation，并想知道如果这是可能的CSSanimation… 所以可能是这样的 Loading… Loading.. Loading. Loading… Loading.. 基本上就是这样继续下去 有任何想法吗？ 编辑：像这样： http : //playground.magicrising.de/demo/ellipsis.html

在CSS中旋转地球仪

我正在用CSS创build一个旋转的地球效应。 我已经在CSS中创build了地球： body { background-color: #111; } #earth { width: 300px; height: 300px; background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg); border-radius: 50%; background-size: 610px; box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3); animation-name: rotate; animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: rotate; -webkit-animation-duration: 12s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } @keyframes […]

在最后一帧停止CSS3animation

我有一个4部分的CSS3animation播放点击 – 但animation的最后部分是为了把它从屏幕上。 但是，一旦玩过，它总是会回到原来的状态。 任何人都知道我可以如何阻止它的最后一个css框架（100％） ，或者如何摆脱它曾经发挥过的整个div。 @keyframes colorchange { 0% { transform: scale(1.0) rotate(0deg); } 50% { transform: rotate(340deg) translate(-300px,0px) } 100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); } }

如何使用CSS 3闪烁/闪烁的文本？

目前，我有这样的代码： @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } 它眨了眨眼，但只是在“一个方向”闪烁。 我的意思是，它只是淡出，然后它以opacity: 1.0出现opacity: 1.0 ，然后再次淡出，再次出现，等等…我希望淡出，然后再从这个淡出“提高”回来到opacity: 1.0 。 那可能吗？