css-animations

问题 I don't know how to use JQuery, so I need a method which could trigger an animation using JavaScript only. I need to call/trigger CSS Animation when the user scrolls the page. function start() { document.getElementById('logo').style.animation = "anim 2s 2s forward"; document.getElementById('earthlogo').style.animation = "anim2 2s 2s forward"; } * { margin: 0px; } #logo { position: fixed; top: 200px; height: 200px; width: 1000px; left: 5%; z-index: 4; opacity: 0.8; } #earthlogo { position:

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

问题 I have a bit of CSS3 animation which works perfectly in all the browser which support CSS3 except safari. Weird isn't it? Ok here's my code: HTML <div class="right"> <div class="key-arm"><img src="images/landing/key-arm.png" alt="arm" /></div> </div> CSS .landing .board .right { width: 291px; height: 279px; background: url('../images/landing/key-pnl.png'); bottom: 16px; right: 250px; position: absolute; } .landing .board .right .key-arm { position: absolute; left: 44px; top: 18px; width: 41px

问题 I'm creating a small website that tells a story by using css and sprite animation. The problem I'm encountering is that I do not know how to change the keyframes once I have set them in the css files expecially while I try to make it compatible with all of the browsers. Here is what I have, the main part of the css: #ManSprite{ overflow:hidden; width:200px; height:200px; position:absolute; top:280px; left:140px; background-image: url("http://imageshack.com/a/img571/1710/2r1h.png"); z-index:99

问题 I have implemented animation pausing as described here: How to pause and resume CSS3 animation using JavaScript? Here is my CSS for the rotating element: .is-rotating{ -webkit-animation: circle 55s linear infinite; -moz-animation: circle 55s linear infinite; -ms-animation: circle 55s linear infinite; animation: circle 55s linear infinite; } I toggle a is-paused class to the elements in question onmouseover : .is-paused{ -webkit-animation-play-state:paused; -moz-animation-play-state:paused; -o

问题 I have a fluid container which contains a number of absolutely positioned fluid divs. I want to use CSS3 transforms to move these on and off the page. The problem i am having is that when using transforms you either use exact pixel amounts or percentages of the element itself. So you can see an example of the sort of thing i'm referring to (this is just a test example) at http://jsfiddle.net/K3uPY/ This is using a transform of 1000% to move them offscreen which is obviously not a good thing

问题 I have a some animation which in the end will hopefully make up a nice CSS-only Vintage Flip Clock. Basically i have the numbers split into two parts and animate each of the two parts with a 180° Rotation on the X-Axis. ╔═══════╗ ║ ## ║ ║ ### ║ ║ # ## ║ ║ ## ║ ╠═══════╣ ║ ## ║ ║ ## ║ ║ ## ║ ║ #### ║ ╚═══════╝ However, due to the infinite cycle of the keyframes I have a problem with the z-index - at the end of the cycle the wrong figure is on top, thus for a brief moment the wrong digits are

问题 I saw this animation on codepen, and I don't know why it's written this way to have this effect, but I think it's going to have the effect of rotating 360deg clockwise, 360deg counterclockwise, instead of bouncing up and down or left and right I'm particularly puzzled with these Keyframe animation @keyframes move{ from { transform: rotate(360deg) translateX(1.125em) rotate(-360deg); } to { transform: rotate(-360deg) translateX(1.125em) rotate(360deg); } } Results the following https://i.stack

问题 I have a rotating css animation that stops when the page is scrolled. I tried enabling the hardware acceleration but without luck. This doesn't work while the page is scrolled -webkit-animation: rotating 5s linear infinite; -webkit-transform-style: preserve-3d; -webkit-transform: translateZ(0); 回答1: In short: You can't. It's a feature, not a bug. iOS Safari stops ALL JS and animation on scroll to conserve battery life (try scrolling a page of animated gifs, for instance). I've heard you can

问题 I have two matrix layout. The first one contains seven images placed like a grid. How can we arrange all the images vertically in the second layout with animation? -Thanks 回答1: If you are able to 1) detect the location of your target matrixlayoutrowcells, 2) to detach the content of the source cell and 3) attach it to the target cell, than it's nothing more than just incorporating some CSS animations ;-) See this example of a moving sap.ui.commons.Image : http://jsbin.com/jafuk/1/edit 来源：