css-animations

What is the best way to alternate the direction of a CSS3 animation on click without javascript? I've been exploring checkbox hacks lately and trying to figure out a way to have only one set of keyframes instead of two sets for one going forward and one to come back. Is this possible? Or is there a way to do it with one set? For instance I have the following keyframes: @keyframes moveIt { 0% { transform: translateX(0); width: $size; } 50% { width: $size*1.2; } 100% { transform: translateX(50px); width: $size; } } @keyframes moveItBack { 100% { transform: translateX(0); width: $size; } 50% {

I'm having a trouble with the effect I want to create. My body in the HTML file it's just a div with two images. I was trying to give animation to the first image in the following way: in 0% it starts at the beginning of the div (the fish's head is on the right) in 100% it ends in the end, but at this point I want to rotate the image and keep that effect until it gets 0% again. (that is, the fish should point towards the left during the reverse motion) But it just rotates in 100% and no more. I don't know if this happens because I don't understand some concept of the animation property. This

I'm creating a link list where one link container expands when hovering it ( with details, image and description). I have no problems to animate it with css transitions or animations. The problem is that I would like it to stay expanded even after the mouse moves away. And I would like to do it without javascript. Is that possible? Thanks! No it's not possible because every css that will be applied on mouseover ( :hover ) will be removed on mouseout and there is no other way to capture mouseover and out. #animate:hover { /* ex. -webkit- -moz- -ms- -o-​ */ animation: animation 2s infinite; /*

I'm building a planetsystem, where it is possible to hover over the orbit and the animation speed changes . I tried it with the onMouseOver and .hover jquery, but I couldn't figure out why it wasnt working. #universum-planet1 { position: absolute; height: 250px; width: 250px; top: 40%; left: 50%; margin-left: -125px; margin-top: -65px; z-index: 1; border: 1px solid #989898; -webkit-border-radius: 225px; -moz-border-radius: 225px; border-radius: 225px; -webkit-animation: spin 15s linear infinite; -moz-animation: spin 15s linear infinite; animation: spin 15s linear infinite; -moz-transform

I am developping a web application that needs to generate and compute a bunch of arrays at startup. I would like to show a loading page while this occurs, and maybe play a little with css animations, but it seems that CSS animations will hang while javascript is executed. I already have a loading bar that is updated on key events of the processing, but I would like to use css-transitions to smooth it a bit. I was wondering if there is any way to let something animate while the javascript is executing? I know I can manage to give back control to the browser from time to time to let it refresh,

I have a CSS3 animation defined (and associated @keyframes ): animation: myAnimation 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; Even though you can't see it, is this animation running (and consuming resource) if the parent element has visibility: hidden ? Yes, the animations continue to run even if the parent container has visibility:hidden because the element is still there and it is only hidden. In the below snippet you can verify the contents of .output div to see that it keeps running and marginLeft keeps changing. window.onload = function() { var animEl = document

I made a CSS3 animation connected to an ng-repeat which then shows an inline-list with Bootstrap3, I limited the number of maximum 3 of the list showing and I have some little issues with appears mostly in Firefox (believe it or not IE11 is without issues, wow I was surprised). I have 2 buttons (previous/next) and when I click the Next button then the animation of sliding from left to right start to do his job, but in Firefox when clicking multiple times, it seems that the animation only works on 2/3 of the list (basically the last item on the right always show up first without even sliding

I got a weird behavior when working with transform in CSS3. Here is my code: *, *:before, *:after { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .btn_exchange a { position: relative; text-decoration: none; display: block; width: 150px; float: left; color: #ffffff; font-size: 14px; background: #0ea2d3; box-shadow: 0 3px 0 0 rgba(7, 154, 190, 0.75); text-align: center; font-weight: bold; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @-webkit-keyframes pulse { 0% { transform: scale(1); }