css-animations | 易学教程

How stop keyframe Animation exactly after 1 second without to use setTimeout ? - Problem events on queue

阅读更多关于 How stop keyframe Animation exactly after 1 second without to use setTimeout ? - Problem events on queue

I think this will be a problem really difficult to solve... I created a speedometer that shows number of earthquakes occured in my city. I want to animate this speedometer in two way: background-color (green when there aren't quakes and red when there are 3000 quakes) and width of this colored div (the div where i animate background-color). So the width will be 0 when there aren't quakes and will be 100% when there are 3000 quakes. The animation is 2 seconds, so for example if i have 1500 quakes: Add the class for animate speedometer $('#first').addClass('first-start'); And using setTimeout i

CSS animation onclick and reverse next onclick

阅读更多关于 CSS animation onclick and reverse next onclick

问题 I am using a spritesheet and keyframes to animate the image on a button when it is clicked. When the button is clicked I want the frames to run in one direction and leave the button on the last image in the spritesheet, and when it is clicked again I want the same frames to run backwards, leaving the button on the first image on the spritesheet. I am currently trying to use jquery to change the class on the button to an animating class when it is clicked, but this doesn't seem to be working.

How stop keyframe Animation exactly after 1 second without to use setTimeout ? - Problem events on queue

阅读更多关于 How stop keyframe Animation exactly after 1 second without to use setTimeout ? - Problem events on queue

问题 I think this will be a problem really difficult to solve... I created a speedometer that shows number of earthquakes occured in my city. I want to animate this speedometer in two way: background-color (green when there aren't quakes and red when there are 3000 quakes) and width of this colored div (the div where i animate background-color). So the width will be 0 when there aren't quakes and will be 100% when there are 3000 quakes. The animation is 2 seconds, so for example if i have 1500

Samsung S6 Webview css animations issue

阅读更多关于 Samsung S6 Webview css animations issue

问题 I'm working on application written in cordova/phonegap. Now i have some strange issue - in Samsung s6 css animation does not work properly. For example - i have a spinner animated with css. Every time when launching application spinner doesn't want to hide. I also hide some element using css animation. And after launching application this element doesn't slide. What's strange these bugs occurs only on first application launching, every second time when css animation is applied it works. Also

Firefox only runs the CSS animation once

阅读更多关于 Firefox only runs the CSS animation once

问题 I'm building an open source tab system for beginners to start off with. I think i've found a bug in how Firefox renders CSS animations. Tab animations only fire once in firefox I am using Dan Edens animate.css to do the animation for each tab. Everything works fine in Chrome, and Safari however firefox only runs the animation once and then never triggers it again. Take a look at the following demo on jsfiddle to see exactly what i'm talking about: http://jsfiddle.net/jsheffers/vqdJK/ $('#tabs

How to smooth out a CSS gradient transition?

阅读更多关于 How to smooth out a CSS gradient transition?

问题 I am creating an interactive touchscreen display using a program called Intuiface and have created some background tiles/squares that I want to make look 'alive' by transitioning slowly between colours. I have used a linear-gradient transition in CSS to do it but the problem is that the transition looks choppy. The program is running 12 visible tiles (it is a very large touchscreen). I have tried using fewer colours and running on more powerful GPUs (I think it is CPU run anyway) but this

Sprite animation wobbly / jumping in IE11

阅读更多关于 Sprite animation wobbly / jumping in IE11

问题 I built a semi-transparent sprite png which can be found at https://www.srf.ch/static/srf-data/test_sprite.png It is a 17280px high and 910px wide png (30 * 576 = 17280) - everything seems correct. I now want to loop through each frame (it should be a map of slightly moving points) with CSS3 keyframes using background-position . I adapted an example from https://builtvisible.com/3-logical-alternatives-to-animated-gifs/ (see http://codepen.io/tombennet/pen/oxmaLd) I can reproduce that example,

Random Keyframe Positions Every Iteration to Create Falling “Matrix Code”

阅读更多关于 Random Keyframe Positions Every Iteration to Create Falling “Matrix Code”

问题 I'm attempting to make an HTML web page with animated CSS classes on many independent DIVs moving to their own randomly generated positions. I have 20 elements with randomly generated characters falling from the top of the page and dissipating as they move along their y-axis (like the Matrix code). EDIT: JsFiddle Demo Remember the range is wide, so sometimes the group of characters generate far off to the right (outside the small viewing window) Generating random char in top JavaScript

animate into view when scrolled to angular2

阅读更多关于 animate into view when scrolled to angular2

问题 I found a library for animating elements into view when scrolled to (aos), but it doesn't seem to have any angular2 bindings for using. Does anyone know of how to accomplish something like this inside angular2, or at least configure aos to work within angular2? Thanks for any help 回答1: Angular (meaning version 2+) makes it pretty easy to include any 3rd-party JS libraries into your app. I was able to get aos working in Angular 4 by following these steps: Disclaimer: you may be able to

Clip child to parent element with border-radius

阅读更多关于 Clip child to parent element with border-radius

问题 How do I force clip a child to a parent element that has rounded corners. <div class="item" > <div class="top"> <h1>Tile</h1> <h2>Click me</h2> </div> <div class="behind"> <h3>Details</h3> </div> </div> When animating the child, its ignores the border-radius of the parent element. Is there a way to fix the two corners on the top? .item{ text-align: center; cursor: pointer; overflow: hidden; height: 280px; width: 280px; float: left; border-radius: 5px; background: white; margin: 10px; position