Questions tagged «css-animations»

我正在opacity: 0;CSS 中设置的某些元素上运行动画。动画类被施加的onClick，并且，使用关键帧，它改变从不透明0到1（除其他外）。 不幸的是，动画结束后，元素将返回到opacity: 0（在Firefox和Chrome中）。我自然的想法是，动画元素会保持最终状态，而不是覆盖其原始属性。这不是真的吗 如果没有，我如何才能做到这一点？ 代码（不包括前缀版本）： @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; } }

301 css  css-animations 

目前，我有以下代码： @-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。那可能吗？

287 html  css  css-animations  opacity 

是否可以在不使用Javascript的情况下在页面加载时使用CSS3过渡动画？ 这是我想要的，但是在页面加载时： http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html 我到目前为止发现的 CSS3 transition-delay，一种延迟对元素的影响的方法。仅适用于悬停。 CSS3 Keyframe，可在负载下工作，但运行速度极慢。因此没有用。 CSS3过渡足够快，但不会在页面加载时进行动画处理。

195 css  webkit  css-transitions  css-animations 

我有4部分CSS3动画在单击时播放-动画的最后一部分是将其从屏幕上删除的。 但是，一旦播放，它始终会返回其原始状态。任何人都知道如何在它的最后一个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); } }

180 css  css-animations 

我已经回顾了很多演示，并且不知道为什么我无法使CSS3自旋起作用。我正在使用最新的稳定版Chrome。 小提琴：http： //jsfiddle.net/9Ryvs/1/ div { margin: 20px; width: 100px; height: 100px; background: #f00; -webkit-animation-name: spin; -webkit-animation-duration: 40000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 40000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 40000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-transition: rotate(3600deg); } <div></div> 运行代码段隐藏结果展开摘要

158 css  css-animations 

因此，我了解了如何同时执行CSS3过渡和动画。我用谷歌搜索的不清楚是什么时候使用它。 例如，如果我想使球弹跳，很明显，动画是必经之路。我可以提供关键帧，而浏览器将做中间帧，并且我将制作一个漂亮的动画。 然而，在某些情况下，无论哪种方式都可以达到上述效果。一个简单而常见的示例是实现Facebook风格的滑动抽屉菜单： 可以通过以下过渡来实现此效果： .sf-page { -webkit-transition: -webkit-transform .2s ease-out; } .sf-page.out { -webkit-transform: translateX(240px); } http://jsfiddle.net/NwEGz/ 或者，通过类似这样的动画： .sf-page { -webkit-animation-duration: .4s; -webkit-transition-timing-function: ease-out; } .sf-page.in { -webkit-animation-name: sf-slidein; -webkit-transform: translate3d(0, 0, 0); } .sf-page.out { -webkit-animation-name: sf-slideout; -webkit-transform: translateX(240px); } @-webkit-keyframes sf-slideout { from { -webkit-transform: translate3d(0, 0, 0); …

155 css  css-transitions  css-animations 

我真的很想让一段文字在不使用JavaScript或文字修饰的情况下闪烁出旧式风格。 没有过渡，只有* blink *，* blink *，* blink *！ 编辑：这不同于那个问题，因为我要求不连续转换的眨眼，而其他问题的OP问如何用连续转换来代替眨眼

149 html  css  css-animations  blink 

似乎最近有一个Google Chrome浏览器更新，导致在执行之后文字模糊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变换时遇到类似问题的帖子，但找不到关于2d变换的任何信息。 任何想法将不胜感激，谢谢！

126 google-chrome  css  webkit  transform  css-animations 

如何让两个CSS动画以不同的速度播放？ 图像应同时旋转和增长。 旋转将每2秒循环一次。 生长将每4秒循环一次。 示例代码： .image { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin:-60px 0 0 -60px; -webkit-animation:spin 2s linear infinite; -webkit-animation:scale 4s linear infinite; } @-webkit-keyframes spin { 100% { transform: rotate(180deg); } } @-webkit-keyframes scale { 100% { transform: scaleX(2) scaleY(2); } } http://jsfiddle.net/Ugc5g/3388/-仅播放一个动画（声明了最后一个动画）。

118 css  css-animations 

这个简单的事情应该很容易完成，但是我要把它弄复杂。 我要做的就是动画化React组件的安装和卸载。到目前为止，这是我尝试过的方法，以及每种解决方案都不起作用的原因： ReactCSSTransitionGroup -我根本不使用CSS类，因为它全都是JS样式，所以这行不通。 ReactTransitionGroup-这个较低层的API很棒，但是它要求您在动画完成后使用回调，因此仅使用CSS过渡在此处无效。总会有动画库，这引出下一点： GreenSock-许可证对于IMO的商业用途过于严格。 React Motion-这看起来很棒，但是TransitionMotion对于我需要的东西却非常混乱和过于复杂。 当然，我可以像Material UI一样做一些技巧，在其中呈现元素但保持隐藏（left: -10000px），但我宁愿不走那条路。我认为它很笨拙，并且我希望卸下我的组件，以便它们清理并不会弄乱DOM。 我想要一些易于实现的东西。在安装时，为一组样式设置动画；卸载时，为一组相同（或另一组）样式设置动画。做完了 它还必须在多个平台上都具有高性能。 我在这里撞墙了。如果我缺少某些东西，并且有一种简单的方法可以做到，请告诉我。

97 animation  reactjs  css-animations  greensock  react-motion 

我正在尝试使CSS动画属性在完成后保留，这可能吗？ 这就是我想要实现的目标... 当用户登陆页面时，该元素应该被隐藏，在3秒钟（或任何其他时间）之后，该元素应淡入，动画完成后应留在该页面上。 这是一个小提琴尝试... 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>

92 css  css-animations 

我正在尝试制作省略号动画，并想知道CSS动画是否可能... 所以可能就像 Loading... Loading.. Loading. Loading... Loading.. 基本上就是这样继续。有任何想法吗？ 编辑：像这样：http : //playground.magicrising.de/demo/ellipsis.html

92 css  css-animations 

我环顾四周，但找不到我想要的东西。 我的页面上目前有一个CSS动画，它是由：hover触发的。当使用媒体查询将页面调整为宽度超过700px时，我希望将其更改为“单击”或“触摸”。 这是我目前所拥有的：http : //jsfiddle.net/danieljoseph/3p6Kz/ 如您所见，：hover不能在移动设备上工作，但我仍然想确保单击即可，而不是将其悬停。 如果可能的话，我宁愿使用CSS，但也对JQuery满意。 我感觉这很容易做到，但我只是缺少一些非常明显的东西！任何帮助，将不胜感激。 这是CSS动画： .info-slide { position:absolute; bottom:0; float:left; width:100%; background:url(../images/blue-back.png); height:60px; cursor:pointer; overflow:hidden; text-align:center; transition: height .4s ease-in-out; -webkit-transition: height .4s ease-in-out; -moz-transition: height .4s ease-in-out; } .info-slide:hover { height:300px; }

83 css  css-animations 

最近，我发现了如何“正确地”使用CSS动画（以前，我不认为它们不能像JavaScript中那样制作复杂的序列）。所以现在我正在学习它们。 为此，我尝试在类似进度条的元素上进行渐变“耀斑”扫描。类似于对本机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%);} } …

79 css  css-animations 

我正在CSS中创建旋转的地球效果。我在CSS中创建了Globe： body { background-color: #111; } #earth { width: 300px; height: 300px; background: url(https://web.archive.org/web/20150807125159if_/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; …

75 html  css  css-animations