css-animations

I'm working on adding click/touch animations to buttons on a project I'm working on, and I've come across a frustrating problem concerning animating buttons which show and hide elements. The project is a single page mobile web app with a handful of buttons on it. I'm using jQuery to set a css keyframe animation on a button when it's pressed. The button hides the current page, and shows a new one. The problem is, when I click the button, the page changes before the animation is complete, and the animation is paused whilst the container is hidden. When the container is re-shown, the animation

I was making a slider using css3 keyframes. I don't want my last slide directly jump to first slide. I found some questions related to it and found that duplicating the first image trick will work. It works fine first time, but second time the first slide take double time compare to normal time which is obvious because last slide and first slide are same. So is there any way to resolve this issue? Also I found this answer , in this the last solution is too close to answer this question, but the problem is when it starts, its coming from the right i.e transform:translateX(100%) which I don't

I am trying to make it so when someone clicks on the input box it rises to the top of the screen. I am able to make this work but I can't the other content within the parent div to move with it. Here is what I have: container{ } input#search-bar:focus{ position: absolute; border: 1px solid #008ABF; transition: 0.35s ease; color: #008ABF; margin-top: -10px; } <div class="container"> <div class="brandHeader"> <h1>My Header</h1> </div> <form class="formHolder"> <input type="text" id="search-bar" placeholder="Search"> </form> </div> What I want is My Header to also move up 10px at the same time as

I completely understand that you cannot group animation keyframes selectors such as @keyframes, @-moz-keyframes, @-webkit-keyframes { /*do something*/ } and that you absolutely MUST do @keyframes { /*do something*/ } @-moz-keyframes { /*do something*/ } @-webkit-keyframes { /*do something*/ } I know there are pre-processors that can do all this for me. But I am more interested in the reason behind why this is the case? My google-fu is failing me. It seems to always direct me to a stackoverflow page telling someone they 'cannot' do it and they must separate them all out, or telling people about

Using @keyframes (and animation ) to animate a color does not work in Chrome. Demo: https://jsfiddle.net/ed3pypwr/ In Chrome the link stays blue. In Firefox it goes from red to green as expected. On a div it works fine in Chrome as well. Is there any way to solve this? EDIT I know it should be prefixed with -webkit- to ensure maximum compatibility, but this is not the issue here. It does not work anyway. EDIT 2 A solution would be to put the link in a wrapper and use currentColor : https://jsfiddle.net/b84gttu6/ . Is there a better way ? Old versions (<43) of Chrome use the prefixed @-webkit

Im trying to get a header to fly in and after that when you hover it, it should shake (both with css3 animation). It flies in the way i want, also shakes, but after ive removed the mouse from the element it goes back to the original margin-right (it had before the flyin animation) even though ive set `-animation-fill-mode: forwards; When i look in chromedevtools the element never changes its margin-right (even though the animation works..). Can i fix this? Also, is there a way of preventing the first animation to happen again after the shake animation? flyin animation: #name { margin:40px 2%