css-animations | 易学教程

Refire CSS animation with javascript after a previous one is complete

阅读更多关于 Refire CSS animation with javascript after a previous one is complete

问题 I was trying to use the new animate() function to refire a CSS animation. I'm using Chrome 48 but I wonder if this is even possible right now. The animation should be just a growing and shrinking square. I've tried several things, as you can see, but none worked: var elem = document.querySelector(".box"); document.addEventListener("click", function() { elem.classList.add("close"); elem.animate(); //not working elem.animate("grow"); //not working elem.animate([{ transform: 'scale(1)' }, {

Trigger a CSS Animation when the user scrolls to page section

阅读更多关于 Trigger a CSS Animation when the user scrolls to page section

问题 I have a simple CSS animation on my site, where I want to show 5 divs showing one at a time in a row. Everything works fine, but I want to make a trigger to that animation, when the user scrolls to that particular section on my site(now the animation starts when the page loads). Here is my code: <div id="space"></div> <div id="container"> <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" /> <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3

Test if Hardware Acceleration has been enabled for a CSS animation?

阅读更多关于 Test if Hardware Acceleration has been enabled for a CSS animation?

How can I tell (for testing purposes) if Hardware Acceleration has been enabled for a CSS animation? I have the following code which essentially enlarges an element and makes it fullscreen (without using the HTML5 fullscreen API). It runs like a stuttering asthmatic tortoise on most mobiles when using a jQuery animation so I have used CSS3 instead. Here is the jsFiddle example: $("#makeFullscreen").on("click", function() { var map = $("#map"), mapTop = map.offset().top, mapLeft = map.offset().left; $("#map").css({ "position": "fixed", "top": mapTop, "left": mapLeft, "width": map.outerWidth

Is it possible to use the nth-child value as a parameter in a property? (and how)

阅读更多关于 Is it possible to use the nth-child value as a parameter in a property? (and how)

问题 Short description (tl;dr;) Is there a "pure CSS" way (not Less/Sass) of using the value of the nth-child inside the CSS properties? Something like this: span.anim:nth-child(N) { animation-delay: N * 0.5s; } If there is, how can I do it? If there is not, how could I mimic it in a clean way? (I'm sure that I'm over-complicating things here) Long description I was creating a simple animation in which letters fade in while rotating. For that, I was using a combination of javascript (with jQuery)

Move HTML element upwards on hover

阅读更多关于 Move HTML element upwards on hover

问题 I am trying to move an HTML up about 10px whenever a user hovers their mouse over it. I did some research on w3schools but I could not find any information that helped me. Most of their animation examples were using keyframes and I'm pretty sure that's not what I need because I'm trying to trigger an animation when somebody hovers over the element. I could be wrong though and that's why I'm posting here. Here's the element I'm trying to move: <div id="arrow"> <a href="#"><i class="fa fa-arrow

Rotating a background image with CSS3

阅读更多关于 Rotating a background image with CSS3

问题 I have a background image that has an arrow that points to the right. When a user clicks on the button, the selected state changes the arrow to point down (using a different background position in my image sprite). Is there anyway to animate this using CSS3 so once the button is clicked and jQuery assigns it a "selected" class, it will rotate in an animation (only 90 degrees) from the right to down? (preferably using the single image/position with the arrow that points to the right) I'm

Firefox CSS Animation Smoothing (sub-pixel smoothing)

阅读更多关于 Firefox CSS Animation Smoothing (sub-pixel smoothing)

问题 I'm creating a CSS keyframe animation to have an element appear as if it is casually/slowly floating around a bit. It's nested in parents, one which uses translateX() to slowly move it left and right, and one which uses translateY() to slowly and independently move it up and down. Chrome and Safari render this perfectly, giving it a gradual swaying movement. It smooths the animation (perhaps using sub-pixel smoothing?) so that everything appears very smooth. Firefox however, animates it pixel

CSS3 Transition: Different transition for IN and OUT (or returning from transitioned state)

阅读更多关于 CSS3 Transition: Different transition for *IN* and *OUT* (or returning from transitioned state)

问题 Original Question... updated working code below: I have a loading image which comes up during an ajax load event. The image shows/hides by adding or removing a "loading" class to the body element. Currently, the loading image animates background-size from 0 to 100%, and fades in the opacity (vice versa for the 'return' transition). What I want to accomplish, though, is to have the background-size transition happen instantly (not transition) on the fade out, so: Fade in: opacity from 0 to 1 in

Firefox animation not starting on toggle display style

阅读更多关于 Firefox animation not starting on toggle display style

Fiddle http://jsfiddle.net/B9h8y/1/ In chrome when I click the doc the animation runs. In firefox it doesn't. Why doesn't firefox trigger css animations when display is set to block like in chrome ? <link rel="stylesheet" href="animate.min.css" /> <div class="el bounce animated"> The div </div> <script type="text/coffeescript"> $('.el').css(display: 'none') $(document).on 'click', -> $('.el').css(display: 'block') <script> After research and testing, the real question actually appears to be, "Why does WebKit wait to play the animation until the element is displayed." Both Firefox and Internet

CSS Keyframe animation breaks transition when both are applied on same property

阅读更多关于 CSS Keyframe animation breaks transition when both are applied on same property

I've got a strange behavior when adding a CSS animation on top of the transition for a progress bar element: the transition just stops executing. Not sure why I cannot have both, an initial animation and the transition when changing the element's width. The whole thing looks like this: HTML: <div class="container"> <div class="bar"></div> <div class="actions"> <button id="btnResize">Resize bar</button> </div> </div> CSS: .bar { height: 3px; width: 300px; background-color: blue; position: absolute; transition: margin-left 0.5s ease-in-out, width 0.5s ease-in-out; /*Transition breaks when I add