css-animations

问题 After loading the Facebook SDK my CSS animations are breaking in IE11. Here is a test case: http://tremby.net/dump/ie11test.html Clicking the button toggles a class on it which rotates the button a little via a CSS animation. After five seconds the Facebook SDK is loaded. On Firefox and Chrome and IE10 the button keeps working after this, but on IE11 the animation will no longer play when the class is added. I can't reproduce the issue in JSFiddle. Any idea what's causing this? It has to be

问题 I have the following code from https://codepen.io/anon/pen/ZNLyGe which displays an waiting-bar animation when the user clicks an icon to navigate to another part of the same website. The onclick Javascript uses: window.location.href = strNewURL; It works fine on desktop browsers but on iOS, Safari freezes the animation as soon as it hits the window.location.href line. Is there some way to prevent iOS Safari from stopping that animation? HTML <div class="dvProgressBarInfinite" id=

问题 I'm very happy with the way the marquee works on my website, it works in all browsers except of Safari. What am I doing wrong? Is there anything I can do in order to play the same in Safari as well? .marquee { width: 260px; margin: 0 auto; overflow: hidden; whitespace: nowrap; fontsize: 20px; position: absolute; color: #fff; text-shadow: #000 1px 1px 0; font-family: Tahoma, Arial, sans-serif } @-webkit-keyframes marquee { 0% { -webkit-transform: translate(0, 0); } 100% { -webkit-transform:

问题 I want to do a wipe-in animation for my ng-show. Basically, I want to achieve this simple animation as shown in plunkr here. I know that ngShow has a hook for ng-animate since angular 1.3. However, the situation is a bit complicated. I have a carousel that I extend using angular UI Carousel bootstrap. The bootstrap has a bug with Chrome, so ngAnimate needs to be disabled for all elements under the carousel tag. I need animation for element under my carousel, but if I include ngAnimate, my

问题 I've written an animation which is fired on successful completion of a backend call. Now the animation works flawlessly for the first time, but on the same page if the same backend call is made again and it's successful, then also the animation won't fire. CSS: .upload-to-board-icon-fly { position: relative; animation-name: flytoboard; -webkit-animation: flytoboard 1s ease-in-out 1; -moz-animation: flytoboard 1s ease-in-out 1; -ms-animation: flytoboard 1s ease-in-out 1; -o-animation:

问题 I am creating a keyframe transition sequence. I am wanting the circle to appear for two seconds and then the star to appear for the other two seconds. I am running into a couple of issues. Why is my star turning into a rectangle at the end of the animation? How can I get the star to appear from the center rather than the top-left corner sliding in diagonally? Why does my red circle disappear for a second or two and then the star appear? Does anyone know what I am doing wrong? body {

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 5 years ago . I am trying to make the flapping effect of bird using CSS3 keyframes . It is working fine on google chrome. It does not seem to work on mozilla firefox. here is my fiddle 回答1: It works if you use -moz-animation: fly 0.2s steps(4) 10; . It looks like firefox is having some issues with the way you have shorthanded

问题 When I tried to validate my website, the W3C CSS Validator says parse error. I really tried to understand what I had done wrong but I could really need some help. This is what the validator says: Parse Error: @keyframes line_draw{ 100%{ width: 100vh; } } And this is the code in the file: @media screen and (min-width: 900px) { @keyframes line_draw{ 100%{ width: 100vh;} } 回答1: As @BoltClock said, it seems just IE doesn't recognize @keyframes inside @media rules, so you could create two

问题 I'm targeting older webkit browser QT Webkit, which unfortunately doesn't support changing background image in the keyframes. So intead, I've created sprite combining all 12 frames and now am trying to go through each frame with some interval to create animation. But I have a horizontal sprite and when I try to changing background-position-x at some keyframe %, it slides. Sprite: http://i.imgur.com/krQPw.png Sample: http://jsbin.com/amoxef/1 (I set the animation duration longer to see what's

问题 Why is my keyframes animation (http://jsfiddle.net/ZcFre/) not working in Chrome? My CSS is: .circle1 { -webkit-animation: spinoffPulse 1s infinite linear; } @-webkit-keyframes spinoffPulse { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }; } 回答1: You've put a semicolon after the last curly brace of your animation declaration. Firefox accepted it, but Chrome didn't. After fixing it, your animation spins again: http://jsfiddle.net/ZcFre/1/ @-webkit-keyframes