css-animations

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-down fa-2x"></i></a> </div> For my CSS: #arrow { padding-top: 310px; color: #5C6B7E; position:

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)' }, { transform: 'scale(0)' }], 1500); //not working }); .box { width: 200px; height: 200px; background: #099;

Since I saw the Treahouse website and the sign effect swinging in the tree, I have been trying to reproduce it. .box{ width:50px; height:50px; background: blue; box-shadow: 0 0 5px blue; margin:100px; float: left; -moz-animation: 3s ease 0s normal none infinite swing; -moz-transform-origin: center top; } But it won’t swing. Here’s a demo on JS Fiddle . I also tried a modification of that. bod{ background:blue; } .box{ width:50px; height:50px; background: yellow; box-shadow: 0 0 10px red,0 0 25px red inset; margin:100px; float: left; -moz-animation: 3s ease 0s normal none infinite swing; -moz

I like the way this website made their rings glow and pulse out and would like to know how they did it. I can make something similar but I'm not very good. So this is all I was able to figure out but it doesn't seem to work. CSS: glowycircleouter.blue .glow4 { box-shadow: 0 0 25px #287ec6; } .glowycircleouter .glow4 { -webkit-animation: glowyglow 3s 2250ms infinite; -moz-animation: glowyglow 3s 2250ms infinite; -ms-animation: glowyglow 3s 2250ms infinite; -o-animation: glowyglow 3s 2250ms infinite; animation: glowyglow 3s 2250ms infinite; animation-name: glowyglow; animation-duration: 3s;

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 unsure as to whether transform or key animation frames need to be used. you could use the ::after (or :

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 .2s, background size from 0 to 100% in .2s Fade out: opacity from 1 to 0 in .2s, background size from