css-animations

问题 Currently, I have this code: @-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; } It blinks, but it only blinks in \"one direction\". I mean, it only fades out, and then it appears back with opacity: 1.0 , then again fades out, appears again, and so on... I would like it to

问题 I have several animations on my site that I just realized do not even show up in Firefox or Internet Explorer. I have the background-image within the keyframes. I do this because I have different images in different percentages with the animation. Why doesn\'t the background-image display within the keyframes in Firefox and Internet Explorer and is there a way to make this work? 回答1: As per the specs, background-image is not an animatable or a transitionable property. But it does not seem to

问题 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

问题 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

问题 I have a bar chart that animates with CSS3 and the animation currently activates as the page loads. The problem I have is that the given bar chart is placed off screen due to lots of content before it so by the time a user scrolls down to it, the animation has already finished. I was looking for ways either through CSS3 or jQuery to only activate the CSS3 animation on the bar chart when the viewer sees the chart. <div>lots of content here, it fills the height of the screen and then some</div>

问题 I\'m new to animating SVGs & I\'ve come across a problem that only seems to happen in Firefox. I\'ve created a animation here - http://codepen.io/iamali/pen/txvpo - of a sky scene. The sun should rotate & fade in & out. It works fine in Chrome, but for some reason it appears to ignore the transform-origin value in Firefox and the sun goes AWOL. Does anyone know of such an issue in Firefox? Or could it be anything else? I\'ve tried Google all sorts of terms but there doesn\'t seem to be much

问题 Is it possible to use CSS3 transition animation on page load without using Javascript? This is kind of what I want, but on page load: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html What I found so far CSS3 transition-delay, a way to delay effects on elements. Only works on hover. CSS3 Keyframe, works on load but are extremly slow. Not useful because of that. CSS3 transition is fast enough but don\'t animate on page load. 回答1: You can run a CSS animation on page load without

问题 Why this isn\'t working? What am I doing wrong? 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

问题 I really want to make a piece of text blink the old-school style without using javascript or text-decoration. No transitions, only *blink*, *blink*, *blink*! EDIT : This is different from that question because I ask for blinking without continuous transitions, whereas OP of the other questions asks how to replace blinking with continuous transitions 回答1: The original Netscape <blink> had an 80% duty cycle. This comes pretty close, although the real <blink> only affects text: .blink {

问题 I have a situation similar to this fiddle, where I have a CSS3 animation that scales an element absolute-positioned in the centre of another element. However, when the animation takes place it is off-centre, as seen by the red squares relative to blue in the example. How do I centre it? I have tried a couple of configurations around the transform-origin property, but this isn\'t producing the correct results. Code below: @-webkit-keyframes ripple_large { 0% {-webkit-transform:scale(1);} 75% {