css-animations | 易学教程

css3 animation not working in chrome

阅读更多关于 css3 animation not working in chrome

问题 I have a small animation that is working in firefox, but not in webkit browsers. Maybe someone sees the mistake cause i've looked for an hour... It is part of a impress.js presentation, similar to prezi. Thanks! css: #its.step.present h5{ display: inline-block; position:absolute; animation: aia2 5s linear infinite alternate; -moz-animation: aia2 5s linear infinite alternate; -webkit-animation: aia2 5s linear infinite alternate; -ms-animation: aia2 5s linear infinite alternate; -o-animation:

How to run the CSS3 animation to the end if the selector is not matching anymore?

阅读更多关于 How to run the CSS3 animation to the end if the selector is not matching anymore?

I've always thought that CSS3 Animations (differently from CSS3 Transitions) once started, always finish the job , no matter if the selector is not matching anymore the element that activated them. I'm realizing today that I was probably wrong. In the following example, an animation is triggered by the :focus and :active pseudo-classes. Focus on the first textfield: if you press the tab button slowly, you will see the animations starting and ending correctly; if you press the tab button quickly, you will see that once a new element get the focus, the old element's animation immediately ends

Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)

阅读更多关于 Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)

In accordance with this topic: Firefox 38-40 SMIL problems - very slow speed (resolved in FF version 41 from 22.09.15) and this topic: Intent to deprecate: SMIL SVG tag 'animateTransform' does not work well. It would be nice to replace SMIL (animate tag) with CSS or CSS transitions. CONSOLE WARNING: Please use CSS animations or Web animations instead), which would work fast on the latest versions of Firefox and Chrome. The next Google Chrome warning: CONSOLE WARNING: SVG's SMIL animations ('animate', 'set', etc.) are deprecated and will be removed. Please use CSS animations or Web animations

Using CSS3 Animations in IE9+

阅读更多关于 Using CSS3 Animations in IE9+

I have been trying to get these css3 animations to work in IE9 for a few hours today and I am stumped! I tried implementing a few JavaScript fallbacks but my knowledge is very limited so they failed. I am unsure if it was failing due to my user errors or code errors. Here is a jsFiddle of my code so far, I have replaced the background images with colours. Basically the green and black squares rotate in Firefox and Webkit browsers. http://jsfiddle.net/fJxsV/ I want to have it running on IE9 also. If you can please help me with this I would be very grateful! eivers88 I would use Modernizr to

CSS Animation: Works in Chrome but not in Firefox?

阅读更多关于 CSS Animation: Works in Chrome but not in Firefox?

问题 In rotate animation, works in Chrome but not in Firefox. Why? @-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } #example { background: red; width: 100px; height: 100px; -moz-animation: rotate 20s linear 0 infinite; -webkit-animation: rotate 20s linear 0 infinite; } http://jsfiddle.net/WsWWY/ 回答1: Current Firefox

Removing an item causes React to remove the last DOM node instead of the one associated with that item

阅读更多关于 Removing an item causes React to remove the last DOM node instead of the one associated with that item

问题 I was trying to animate list insertion and removal with ReactCSSTransitionGroup, but the removal animation always animates only the last item of the list instead of the one that's being removed. Here's a jsbin to illustrate this problem. Try pressing the "Add" button to verify that the insertion animation indeed works as expected, then click on the "x" besides any item to see the problem where the last item of the list is animated instead of the one you tried to remove. Did I do something

Blurry text after using CSS transform: scale(); in Chrome

阅读更多关于 Blurry text after using CSS transform: scale(); in Chrome

Seems like there has been a recent update to Google Chrome that causes blurry text after doing a transform: scale() . Specifically I'm doing this: @-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); } } If you visit http://rourkery.com in Chrome, you should see the problem on the main text area. It didn't used to do this and it doesn't seem to effect other webkit browsers (like Safari). There were some other posts about people experiencing a

CSS animation delay in repeating

阅读更多关于 CSS animation delay in repeating

I've recently discovered how to "properly" use CSS animations (previously I dismissed them as not being able to make complex sequences like you could in JavaScript). So now I'm learning about them. For this effect, I'm trying to have a gradient "flare" sweep across a progress bar-like element. Similar to the effect on native Windows Vista/7 progress bars. @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%

How should you prefix transform properties in CSS3 animations?

阅读更多关于 How should you prefix transform properties in CSS3 animations?

问题 I have the following snippet of Sass that works like a charm, but I wonder if I need to prefix my transform properties, and, if so, how? (if not, why not?) @mixin expand-o-band() { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2); } } @-webkit-keyframes expand-o-band { @include expand-o-band(); } @-moz-keyframes expand-o-band { @include expand-o-band(); } @-o-keyframes expand-o-band { @include expand-o-band(); } @keyframes expand-o-band { @include expand-o-band()

Disable CSS animation on pseudo element inherited from parent

阅读更多关于 Disable CSS animation on pseudo element inherited from parent

问题 The title pretty much says it all but here is an example. Let's say I have a CSS 'loading spinner' as below: .spinner { height: 50px; width: 50px; position: relative; animation: rotate .6s infinite linear; border-left: 6px solid #222; border-right: 6px solid #222; border-bottom: 6px solid #222;; border-top: 6px solid #ccc; border-radius: 100%; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } I want to add a pseudo element to this - for example with