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.
Related
What can be a reson of performance drop down. The more times hover starts the greater the delay ... after a few hovers on the animation I have to wait a few seconds.
.post_featured_content{
opacity:0;
-webkit-transition: all ease .3s;
-moz-transition: all ease .3s;
-o-transition: all ease .3s;
transition: all ease .3s;
}
.header_featured_posts .featured_item_inner:hover .post_featured_content{
opacity:1;
}
Do I make some stupid mistake?
Ps. I must wait even for hover without transition effect
Certain changes can be costly on the browser. Basically the only things that can be changed and transitioned/animated quickly are:
Position (using transform)
Scale
Rotation
Opacity
Your example only uses opacity. This usually does not lead to performance issues. Are there any other properties being changed? Do they need a transition as well? If the answer's no, change your transition to read transition: opacity .3s ease instead.
If you are changing anything else your browser will need to re-paint the screen the whole time, which can cause performance issues.
If a part of your site is changing a lot of properties, it might be useful to include the following css:
translate3d(0,0,0)
This forces the GPU to create a separate layer to take care of all the changes.
For more information I suggest you take a read here
I am wondering whether there is already a way through CSS in order to make an element of opacity 0 turns to 1 without any transition time. In other words, I need to make an element which was totally unseen suddenly appears after 4 seconds. No fade-in or out. Just appear with the complete brighteness (opacity).
Use a combination of visibility and opacity:
transition:visibility 0s linear 0.5s,opacity 0.5s linear;
In this demo, hovering over the menu displays only after 0.5s.
http://www.greywyvern.com/?post=337#example5
Simple step-to-end transition:
http://jsfiddle.net/samliew/7EsKK/
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;
}
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.
I'm trying to get my head wrapped around CSS3 transitions, and I'm not sure if there is something wrong with my understanding, or if the browsers aren't cooperating.
First of all, I thought Opera was supposed to have support for transitions, since version 10 or so, but neither transition nor -o-transition seems to do anything in 11.62. Or does Opera use a different syntax?
Anyway, I can make a background color fade in and out on hovering with most other browsers by writing
div {transition:background 2s;}
div:hover {background:lime}
OK so far, and I can also make it so that the background fades in, but not out, by writing
div:hover {transition:background 2s; background:lime}
and that the background fades out, but not in, like so:
div {transition:background 2s;}
div:hover {transition:background 0s; background:lime}
But I don't understand why that happens. According to the docs, a transition with a 0s duration isn't supposed to have any effect, so why does the last one have a different result?
jsFiddle
I assume what you are looking for is the ease timing function.
So your CSS rule should look something like this.
.class {
transition: property(ies) duration timing-function;
}
.class:hover {
property(ies): new value;
}
For Opera you have to define the exact property. In your case it wouldn't be the background property but the background-color property.
From your example it looks like it's behaving as I'd expect it.
The transitions run from one state to another.
I'll try an explain this as best I can.
On the last one you have a trasition of 2s on the <div> in its normal state and a a transition of 0s on the <div> in it's hover state.
So what is happening?
When you hover on the <div>, the state changes to :hover and so the transition for div:hover is run. You have a trasition of 0s so no animation is run.
When you remove the mouse from the <div> the state changes from :hover back to normal, and so the transition for div in its normal state is run. You have this at 2s.
Does this explain what is happening and how the transitions work?