css-animations

This question already has answers here : How to apply multiple transforms in CSS? (9 answers) Closed 3 years ago . I'm trying out the css animation using @keyframes, however the css Transform rotate and translate properties aren't working together. Please advise on what has gone wrong here. Thanks!! You can check the code on codepen: http://codepen.io/anon/pen/XdzwZB following is my @keyframes code: @keyframes slideIn { 0%, 100% { transform: translate(10px); transform: rotate(0deg); color: red; } 25% { transform: translate(125px); transform: rotate(360deg); color: green; } } The correct way to

I am building a slider using css3. Now slider is running continuously but the flow is not right. After slide 4 the slider is going back from left to right all the way down to the first slide. What I want after the last slide the first slide should come from right to left as it is coming in manner for other slide. Will it be possible by css only? @keyframes slide{ 0%{ transform:translateX(0px) } 25%{ transform:translateX(-200px) } 50%{ transform:translateX(-400px) } 75%{ transform:translateX(-600px) } 100%{ transform:translateX(0px) } } fiddle Reason: The reason you are seeing this reverse

I try to scale of image like light box. When run the size of image changed but with out animation. <div id="dnn_ctr428_ContentPane" class="img-rectangular"><div id="dnn_ctr428_ModuleContent" class="DNNModuleContent ModDNNHTMLC"> <div id="dnn_ctr428_HtmlModule_lblContent" class="Normal"> <img alt="" src="/dnn_test/portals/0/Images/logo2.png?ver=1394-08-24-081741-293"> </div> </div></div> css: .img-rectangular:hover img { width: 120%; height: 120%; -webkit-transition: width 2000ms ease-in-out; -moz-transition: width 2000ms ease-in-out; -ms-transition: width 2000ms ease-in-out; -o-transition:

This question already has answers here : Closed 6 years ago . Possible Duplicate: Webkit CSS Animation issue - persisting the end state of the animation? I want to keep the position of my animated div when it finishes running. Right now I animating the div on mouse hover, but the div return back to it's position even if I'm still hovering over it. Is there a way to let it get back only when I mouse out? http://jsfiddle.net/neoswf/X5a64/ div{ width:100px;height:100px;margin:1em;background:red } div:hover { -webkit-animation-name: rotateThis; -webkit-animation-duration:1s; -webkit-animation

In Chrome (19.0.1084.46 m on WinXP) and Safari (5.1.7 on OS X 10.7.4), this fiddle http://jsfiddle.net/Vkpwm/ works; clicking on the google image shows/hides the green div, but when loading it on my iPhone, and on the iPhone simulator in xCode (by using the direct page http://jsfiddle.net/Vkpwm/show/ ), the div never gets shown again. Removing the line "-webkit-transition: 0.5s;" from the css makes it work, but obviously breaks the animation. Removing the line "visibility: hidden;" also makes it work, but means that the div is still there and events get fired on it (e.g. the alert is fired

Hello I have an svg that is a wavy line built with adobe illustrator and I'm trying to add a continuous wave like animation to it. I've tried vivus.js and was able to get the draw animation working but not coninuously. Does anyone have an idea on how to start something like this? I don't expect someone to do the problem for me but instead point me to the right direction, although im not opposed if someone has a quick answer. Any answer will work wether its pure css, js or both. Here is the svg <svg id="wave" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www

I have created basic animation of a circle using css @keyframes. I'm using javascript to trigger animation start/stop by click inside the circle. The animation itself could be divided into 5 (looped) phases: pause-expand-pause-shrink-pause (see @keyframes css section below) The goal I want to achieve is, eventually, to be able to set animation duration and change the values of keyframes (say by having input fields for pause and expand/shrink durations - details doesn't really matter for the scope of this question). I have put together a JavaScript function, to perform this task, and have set

There's an icon in the Font Awesome set that I want to flip horizontally and then spin in that direction, which is the opposite of the regular spin effect. There are a number of ways to do each, but none that I know that will do both since the effects seem to cancel each other out? If I flip it, .fa-refresh { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } then animate it, .icon-spin-reverse { display: inline-block; -moz-animation: spin-reverse 2s infinite linear; -o-animation: spin-reverse 2s

i have a div that is doing a rotation animation as such : @-webkit-keyframes animateCamera { from {-webkit-transform: translateZ(300px) rotateY(0deg);} to {-webkit-transform: translateZ(300px) rotateY(360deg);}} } what I want to happen is that when I trigger an event (let us say a mouseclick), I want to store in a variable the current rotateY as of the animation. For example, if the click event is triggered while the animation is at around 140deg, I want that 140 degrees stored in a variable. Does anybody know how to return the current rotateY value? tnx! I would wager your access the current