Tag: css animations

弃用的SMIL将SVGanimationreplace为CSS或Webanimation效果（hover，单击）: 按照这个话题： Firefox 38-40 SMIL问题 – 速度非常慢（从22.09.15在FF版本41中parsing）和这个话题：意图弃用：SMIL SVG标签“animateTransform”不能正常工作。用CSS或CSS转换代替SMIL（animation标签）会很好。 CONSOLE WARNING: Please use CSS animations or Web animations instead), which would work fast on the latest versions of Firefox and Chrome. 下一个Google Chrome警告： CONSOLE WARNING: SVG's SMIL animations ('animate', 'set', etc.) are deprecated and will be removed. Please use CSS animations or Web animations […]

如何使一个光滑的虚线边框旋转animation，如“行军ant”: 我正在使用“齿轮和链”的cssanimation，但无法创build“平滑”的边框旋转序列。你可以看到这个小提琴如何（当前）我正在使用一个伪元素来产生“旋转”的效果。这是通过在白色虚线和虚线金色边框之间“切换”来完成的，使得它看起来像是“边框正在旋转”。我拥有的 #one{ -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */ -moz-animation: rotateClockwiseAnimation 5s linear infinite; /* Fx 5+ */ -o-animation: rotateClockwiseAnimation 5s linear infinite; /* Opera 12+ */ animation: rotateClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */ } #two{ -webkit-animation: rotateAntiClockwiseAnimation 5s linear infinite; /* Safari 4+ */ -moz-animation: […]

填充水animation: 我正在试图清理animation，使其看起来像是在灌水。我遇到了两个错误，甚至没有能够解决第三个错误：它填满了错误的方式它填充后重置为空（黑色） * 现在，我正在使用<img>标记，但是我想将这个效果移到body { background-image: }并且需要一些方法来指导如何做到这一点。我到目前为止所尝试的： #banner { width: 300px; height: 300px; position: relative; } #banner div { position: absolute; } #banner div:nth-child(2) { -webkit-animation: wipe 6s; -webkit-animation-delay: 0s; -webkit-animation-direction: up; -webkit-mask-size: 300px 3000px; -webkit-mask-position: 300px 300px; -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.25, rgba(0, […]

我如何创build纯CSS的三维球体？: tl; dr：我想用CSS创build一个实际的3d球体，而不仅仅是一个幻觉注意：一些片段示例没有响应。请使用全屏。使用纯CSS，您可以像这样创build和制作一个3D立方体的animation ： #cube-wrapper { position: absolute; left: 50%; top: 50%; perspective: 1500px; } .cube { position: relative; transform-style: preserve-3d; animation-name: rotate; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes rotate { 0% { transform: rotate3d(0, 0, 0, 0); } 100% { transform: rotate3d(0, 1, 0, 360deg); ; } } .face […]

CSS：animation与转换: 所以，我明白如何执行CSS3转换和animation。什么是不明确的，我GOOGLE了，是什么时候使用哪个。例如，如果我想让球弹跳，显然animation就是要走的路。我可以提供关键帧和浏览器将做中间帧，我会有一个很好的animation。但是，有时可以实现上述效果。一个简单而常见的例子就是实现facebook风格的滑动抽屉菜单：这个效果可以通过如下的转换来实现： .sf-page { -webkit-transition: -webkit-transform .2s ease-out; } .sf-page.out { -webkit-transform: translateX(240px); } http://jsfiddle.net/NwEGz/ 或者，通过这样的animation： .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); } to […]

用CSS3animation模仿闪烁标签: 我真的想让一段文字在不使用JavaScript或文本装饰的情况下闪烁旧派风格。没有转换，只有*闪烁*，*闪烁*，*闪烁*！编辑：这是不同的问题，因为我要求闪烁没有连续过渡，而OP的其他问题问如何replace闪烁连续过渡

加载css3过渡animation？: 有没有可能使用页面加载CSS3转换animation，而不使用JavaScript？这是我想要的，但在页面加载： http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html 我到目前为止发现的 CSS3转换延迟，一种延迟对元素的影响的方法。只适用于hover。 CSS3的关键帧，负载工作，但速度非常缓慢。没有用，因为这一点。 CSS3过渡足够快，但不要在页面加载时animation。

如果select器不匹配，如何运行CSS3animation到最后？: 我一直认为CSS3animation（不同于CSS3转换）一旦开始，总是完成作业，不pipeselect器是否不再匹配激活它们的元素。我今天意识到我可能是错的。在下面的例子中，animation是由:focus和:active伪类触发的。关注第一个文本框：如果您慢慢按下Tab键，您将看到正确的animation开始和结束; 如果您快速按下Tab键，您将看到一旦新元素获得焦点，旧元素的animation立即结束并消失。 @-webkit-keyframes pressed { 0%, 100% { transform : scale(1); } 50% { transform : scale(2); } } @keyframes pressed { 0%, 100% { transform : scale(1); } 50% { transform : scale(2); } } a:focus, a:active { -webkit-animation : pressed 2s; animation : pressed 2s; } a, […]

在IE9 +中使用CSS3animation: 我一直在试图让这些css3animation在IE9工作几个小时今天，我很难过！我试着实现了一些JavaScript的后备，但我的知识是非常有限的，所以他们失败了。我不确定是否由于我的用户错误或代码错误而失败。到目前为止，这是我的代码jsFiddle，我用颜色replace了背景图像。 Firefox和Webkit浏览器基本上都是绿色和黑色方块。 http://jsfiddle.net/fJxsV/ 我也想让它在IE9上运行。如果你能帮助我，我将非常感激！

用CSS3animation改变背景图像: 为什么这不起作用？我究竟做错了什么？ CSS @-webkit-keyframes test { 0% { background-image: url('frame-01.png'); } 20% { background-image: url('frame-02.png'); } 40% { background-image: url('frame-03.png'); } 60% { background-image: url('frame-04.png'); } 80% { background-image: url('frame-05.png'); } 100% { background-image: url('frame-06.png'); } } div { float: left; width: 200px; height: 200px; -webkit-animation-name: test; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternate; -webkit-animation-timing-function: linear; […]