this is my css to do animation.
transform: scale(0) rotateY(180deg);
I have to give separate transition-timing-function for scale and rotate. But as per my research, i am able to give like below only, which actually gives same easing function for scale and rotate.
transition: transform .7s ease-in-out;
Any one knows to give separate timing function for scale and rotate.
you can crate multiple animations, the first one would scale and the second would rotate, and assign different easing duration to each of them. multiple animations can then be assigned to a single element.
see this guide http://css-tricks.com/snippets/css/keyframe-animation-syntax/ on how to implement this
quote from the link:
Multiple animations -
You can comma-separate the values to declare multiple animations on a selector.
.animate-this {
animation:
first-animation 2s infinite,
another-animation 1s;
}
Related
I have a CSS keyframes animation that I'm using like so:
.content[docked=true] {
animation: dockContent ease var(--dock-animation-time);
animation-direction: normal;
animation-fill-mode: forwards;
}
.content[docked=false] {
animation: dockContent ease var(--dock-animation-time);
animation-direction: reverse;
animation-fill-mode: backwards;
}
When the docked attribute is set to true, it animates as expected. Afterwards, when the docked attribute is set to false, it doesn't animate and instead snaps to the initial values (0% -- it's running in backwards) as if there were no animation at all. The animation is still being run through though, because I am not setting the CSS rules back to their starting values anywhere except for the animation. After reverting the docked attribute to false, setting it to true again results in the same 'jump' with the expected end values but no transition or value interpolation. Why is this happening?
My animation is too elaborate to use transitions because it sets values in non-linear ways along its duration. That's exactly why I'd prefer not to have to make a second animation with all the values flipped.
Is it possible to prevent the small 'lag' at the end of a css animation?
I am trying to have 4 balls spin around each other constantly. They spin fine, but at the end of each 360deg cycle, there is a very short but noticeable pause.
I know 'animation-fill-mode: forwards' is supposed to make the animation remember its' final state but that doesn't seem to fix the issue.
Perhaps there is a better way to set-up the rotation than the method I have used? Which makes the transition between each animation iteration smoother...
#keyframes container-rotate {
to {transform: rotate(360deg); }
}
animation-name: container-rotate;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
Example here:
http://codepen.io/Recidvst/pen/wGbjvz
Thanks!
Try changing the value of your animation-timing-function to linear. You're currently using ease-in and ease-out which vary the speed of the animation at the beginning or end. linear will use the same speed the whole time.
Updated CodePen.
Here's some info on what the various timing functions look like on a graph across time.
Have you tried animation-timing-function: linear;? or just leaving it as the default ease?
I have a div which is already rotated, however all content within it is transformed in the same fashion.
I have plugged a fiddle below to better illustrate what I am trying to achieve.
What would be the proper way to transform the image of the 'moon' so that it maintains it's original shape as it travels the path?
Simple: Make the moon rotate in the opposite direction!
http://jsfiddle.net/hsntY/3/
#moon { width:150px; animation:RotateRev 15s linear infinite;}
#keyframes RotateRev
{from {transform:rotate(360deg);}
to {transform:rotate(0deg);}}
(also, I can understand if it was just for example or something, but you should use the standard spec AND have prefix fallbacks)
The proper way to transform the image is applying the oposite transforms that you have applied to all the elements.
In your case, that includes the rotateX and rotateY in the path, and the rotate in the animation.
for this to work ok, you also need to specify -webkit-transform-style: preserve-3d; so that the transformations can really undo the previous transforms.
There is a problem, though, and I think this is a Chrome bug: when you apply a keyframes animation, preserve-3d stops working.
So, sorry to say, I am unable to make it work; and I think that it is not posible if this bug isn't corrected. May be in another browser ?
you can check the static correct fiddle correct fiddle without animation
You can see there also the inverse keyframes animation, that you would need to make it work.
I would suggest you to create the elipse scaling the circle in the plane, instead of rotating it in 3D, I believe you can make that work this way
The CSS end like that:
#Path{margin:5% 15% auto; position:relative;
height:500px;width:500px;
background-color:rgba(0,200,200, .1);
border:1px solid black;
border-radius:300px;
-webkit-transform:perspective(0px) rotateX(50deg) rotateY(25deg);
-webkit-transform-style: preserve-3d;}
#moonContain {width:500px;height:500px;position:absolute; margin-left:-0.5%;
-webkit-transform-style: preserve-3d;
}
#moon { width:150px;-webkit-transform-style: preserve-3d;
-webkit-transform:perspective(0px) rotateX(-50deg) rotateY(-25deg); }
#-webkit-keyframes Rotate
{from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}}
#-webkit-keyframes counterRotate
{from {-webkit-transform:rotate(360deg);}
to {-webkit-transform:rotate(0deg);}}
Correction
I wrongly interpret the problem that arises when you set the animation in the moon itself; and I thought it was a bug in Chrome. What it really was happening was that the animation was animating the transform property, and that undoes the transform property specified in the moon itself.
Correct answer:
set both transforms in the animation, even though the later is constant:
#-webkit-keyframes counterRotate
{from {-webkit-transform:rotate(360deg) rotateX(-50deg) rotateY(-25deg);}
to {-webkit-transform:rotate(0deg) rotateX(-50deg) rotateY(-25deg);}}
#moon { width:150px;-webkit-transform-style: preserve-3d;
-webkit-animation:counterRotate 15s linear infinite;}
Correct demo
Is there a way to set sequence transition delays through pure CSS.
in JS i would use something like a for loop and a counter to stagger the delay value. Can this be done in CSS with the
Also is there a way to set multiple properties on a transition shorthand. The example below shows just top when I try to put others it doesn't work.
Single property
-moz-transition: top 0.3s ease-out 0s;
Multiple properties
-moz-transition: top left bottom 0.3s ease-out 0s;
The second question is less important that the first.
There are two questions here, but for question two, you can use the long hand versions instead:
-moz-transition-property: top, left, bottom;
-moz-transition-duration:0.3s
etc.
For question 1, it's not really clear what you are asking – you have realised you can set delays, so what are you looking to do that can't be solved by just adding a delay?
To be honest, you are extremely likely to have to use JS for anything more complex, as there is usually some logic required that can't be done in CSS.
In my app I'm animating the opacity of elements on the page with something like:
.s {
transition-property: opacity;
transition-duration: 250ms;
}
(with vendor-specific versions, of course). And then
.s.hidden {
opacity: 0;
}
So the animation starts when the hidden class is assigned. Problem is, mouse events are still detected on elements with opacity zero, which I don't want, so I need to either set visibility to hidden or display to none after the transition is finished. I would hope to be able to do something like:
.s {
transition-property: opacity, visibility;
transition-duration: 250ms;
transition-delay: 0, 250ms;
}
and then
.s.hidden {
opacity: 0;
visibility: hidden;
}
to use the CSS transition machinery to do this painlessly. As far as I can tell, that doesn't work because visibility is a non-animatable property. But other transition frameworks such as d3 do handle non-animatable properties, in the obvious way by simply setting the value when the transition starts, or when it ends.
The best I've been able to come up with is to use the transitionend event (and its browser-specific variants such as oTransitionEnd) to catch the end of the transition and set visibility at that point, but I'm wondering if there's any easier way, preferably sticking purely to CSS. Or, as the title of my question implies, are non-animatable properties just that?
visibility is an animatable property, see the spec.
Which means your .hidden class will work as you have described. Demo here: http://jsfiddle.net/ianlunn/xef3s/
Edit: the spec isn't perfectly clear:
visibility: if one of the values is ‘visible’, interpolated as a
discrete step where values of the timing function between 0 and 1 map
to ‘visible’ and other values of the timing function (which occur only
at the start/end of the transition or as a result of ‘cubic-bezier()’
functions with Y values outside of [0, 1]) map to the closer endpoint;
if neither value is ‘visible’ then not interpolable.
But this is what I believe it means:
visibility doesn't smoothly animate between a range of visible and hidden in the way that opacity animates between 1 - 0. It simply switches between visible and hidden at the start and end states of the transition.
Providing the transition is either going to or from visibility, then a transition will occur. If trying to transition between visibility: hidden and visibility: collapse for example, those values are "not interpolable" and the transition would not occur.
So in my example, opacity causes the element to fade out and then at the end of the transition, visibility snaps to hidden.
As a good alternative to display/visibility toggle, opacity:0 with pointer-events:none could be used.