css-animations

I have a circle progress bar, only with HTML and CSS, I used keyframes for loading (animation). But the loading is from right to left I wanna reverse it. I edit my CSS keyframes but nothing at all. I try also animation reverse again nothing. Fiddle: https://jsfiddle.net/d20wu8e4/ My Result (image): https://ibb.co/0KCSsZY What I want: https://ibb.co/MGCpHqS * { box-sizing:border-box; } .progress { width: 150px; height: 150px; background: none; margin: 0 auto; box-shadow: none; position: relative; } .progress:after { content: ""; width: 100%; height: 100%; border-radius: 50%; border: 3px solid

I'm pretty sure it's possible to do a css only image crossfade using the new css animation features. My requirements are that it should work for arbitrary number of images without javascript. Does anyone know how it's done? How I'm starting off: img(src='img1.png') img(src='img2.png') img(src='img3.png') img(src='img4.png') Next all the images are set to stack on top of each other with the first one showing: img opacity 0 transition 1s position absolute &:first-child opacity 100 Now how do I go through each image? Edit: Seems impossible. Requires javascript. This article is the best I've seen

I have an animation running on page load and with javascript I add a class containing the -webkit-animation-play-state:paused; Working fine on OSX safari and all other browsers (even PC) too but on mobile, only on iOS that the animation doesn't seem to paused when called. Here's a fiddle on how the animation state is running and paused. http://jsfiddle.net/uc9c5/2/ Try it on iOS, you'll see that it's totally ignored. Workaround approach for iOS 8-9 Safari that use -webkit-animation: none !important; instead of -webkit-animation-play-state:paused; This approach is for GWD, but can apply

Every time I visit a page with CSS3 animations, my notebook becomes noisy (gives me a signal that it does some heavy job on there). I wouldn't care myself if at least resulting animations were smooth enough. But they are not. What I get as a result on my 2.4 GHz Core 2 Duo with 8GB of RAM and dedicated NVIDIA GeForce 320M (not much, but should be enough for some css, no?...) is some jerky, randomly flickering, in some cases having weird artifacts... "animation", that is often worse then it's JS equivalent... Has anyone done any comparisons of JS vs CSS animations? Or benchmarking of proposed

Is it possible to transition the items in an flexbox? When you click I want all items to collapse except the one that is clicked. The one that is clicked should use all available space from the container. // only works once! $(".item").click(function() { $(".item").not(this).each(function() { $(this).addClass("collapse"); }); }); html, body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; overflow: hidden; } .container { flex-grow: 1; flex-shrink: 0; flex-basis: auto; display: flex; flex-direction: column; height: 100%; } .item { flex-grow: 1; flex-shrink: 1; flex-basis: auto;

I am trying to achieve a CSS only slider. When hover ing left and right arrows, the slider has to slide . Of course. I tried something using animation-play-state , animation-fill-mode (to keep the positions) and animation-direction but I'm not able to fully make it work. Starting with animation-play-state: paused , hover ing the arrows changes it to running . On hover of the right arrow, everything is fine. We can hover, leave, hover again. But, as soon as I hover the left arrow (that changes the animation-direction to reverse ), it's broken. Simplified snippet : .wrapper { overflow: hidden;

I've got a simple css animation that I'd like to play and then stop on the last frame fully displaying the image. But currently at the moment it plays then seems to revert back to frame one so the santas face disappears. How can i make it play through once then stop on the last key frame or display the image without it fading out again? http://jsfiddle.net/uy25Y/ <img class="santaface" src="http://imgs.tuts.dragoart.com/how-to-draw-a-santa-face_1_000000001282_3.jpg"> .santaface{ opacity:0; position: absolute; left:40%; top:20%; width:20%; -webkit-animation-name: santaappear; -webkit-animation