CSS3 transitions, transforms and animations are wonderful. They are even more now more browsers do support them.
Still there's one thing I keep asking myself: Why isn't the spec definining that CSS3 transitions and animations should handle height:auto?
It doesn't make any sense when we're moving away from fixed layouts with things like the CSS3 flexible box model and media queries.
It doesn't make any sense to use JavaScript just to set a CSS transition with a fixed height.
Now comes my question:
Will the W3C ever specify that height:auto should be supported for CSS3 transitions and animations or can we request them to specify this?
You can transition max-height instead: http://jsfiddle.net/leaverou/zwvNY/
I'm not sure why they didn't say anything about auto values either, but you can try asking them through their public CSS mailing list. As the transition and animation specs are still working drafts, they might just toss in some changes to address this matter. Good luck!
I think I've found a solution:
http://jsfiddle.net/adambiggs/MAbD3/
My workaround is to transition max-height to the exact content height for a nice smooth animation, then use a transitionEnd callback to set max-height to 9999px so the content can resize freely.
Related
Is it possible to calc animation-duration depend on element's width with pure css?
I have a marquee animation. And I want the animation-duration depend on the length(width) of the text itself. Is it possible to deal without js?
Technically you could calculate animation based on width using a CSS preprocessor, but the problem one is going to encounter is that unless the width is specified, CSS isn't going to know how wide something is. That information doesn't become available until the page is loaded.
We all know that background-attachment: fixed makes the background fixed and creates a parallax effect. However, this is extremely expensive, since the DOM has to repaint every time you scroll on the page. This makes your site feel a bit choppy, especially if you have several fixed backgrounds on your page. Does anyone know a better way to do this?
This pure CSS example uses absolute positioning, transform, and perspective to render the parallax effect. For some browsers, scroll-behavior: smooth may also minimize some of the visible choppiness.
There are more efficient ways to render a parallax effect by using JavaScript by animating only the visible elements and using intervals to update element positions. This article explains some of those techniques in greater detail. The requestAnimationFrame function in particular allows the browser to execute the scroll animation on the next available repaint.
I want a smooth transition when the viewport resizes, so i added transition to all the elements
*{transition:all .5s}
is it bad, i mean does it have any adverse effect on performance?
The only time a performance issue will occur is if you are changing the actual elements or adding media elements. I think that transition should be fine just remember vendor prefixes to ensure cross-browser compatibility.
I have the following code:
http://jsfiddle.net/RFMxG/1/
When the transition runs, you can see a padding of about 20-30 pixels on the left hand side. Despite the fact I have set the transform-origin to be 0,0,0, it is still not correctly rotating about the y-axis. The left edge of the blue box should be flush against the left hand edge at all times during the animation.
Can anyone tell me what I've done incorrectly?
Okay, there are whole bunch of issues here:
1) CSS transforms aren't animatable using transitions. If you look at the W3C list of transitionable properties, you'll notice that transform isn't there.
2) -webkit-perspective only affects the children of the element it is applied to, not the element itself. Read the Safari blog on this:
The interesting thing about -webkit-perspective is that it does not
affect the element directly. Instead, it affects the appearance of the
3D transforms on the transformed descendants of that element; you can
think of it as adding a transform that gets multiplied into the
descendant transforms. This allows those descendants to all share the
same perspective as they move around.
3) It's awesome that you posted a fiddle, but since this is a CSS problem, for future reference it would have been a lot easier if you cleaned out all the javascript, and used one set of browser prefixes only. Help us help you!
4) What you probably want to use is an animation. Here's a highly modified version of your fiddle that works on hover:
http://jsfiddle.net/RFMxG/4/
5) If javascript is your skill set, and you're at all concerned about browser compatibility (which of course you are!), I highly recommend doing these kinds of animations with jstween.
Right, so the solution was actually due to the fact the transform origin needs to be set prior to the animation starting (it cannot be set at the same time the -webkit-transform property is set).
I've updated the fiddle to demonstrate this now works correctly.
http://jsfiddle.net/RFMxG/5/
Take for example this code.
So, instead of the <a> tag I want to use an empty div because using text-indent:-9999px is not good for SEO.
To be more clear, I want to achieve something similar with this effect but only with css.
Take a look again on my code to see exactly my approach to achieve this effect.
Also is it possible to add a smooth fade in effect on hover only with CSS?
I don't think that using text-indent has a negative impact on SEO, unless you are wearing a black hat anyway. http://www.google.com/support/webmasters/bin/answer.py?answer=66353
To answer your second question (don't understand the first one), I think for browser compatibility, it's much better to use js (maybe flash) to have a fade in effect. I personally use jQuery, which makes life really easy.
Otherwise, there's the CSS3 property transition-property that one can use http://www.w3.org/TR/css3-transitions/.
EDIT
If I understand the first question correctly, to achieve the effect with the example you gave purely in CSS is hard, at least for now. You're better off using a js library like jQuery for effects like bounce and fade-ins.
Instead of text-indent, you can also use padding.
Basically, set either the height or width (but only one!) of the element to zero and use a padding-top or padding-left to achieve the desired dimensions. Note that overflow: hidden is needed to push out all the content from view and create the "invisible" effect.
Example: http://jsfiddle.net/N8qah/16/
Fancier example with transitions: http://jsfiddle.net/N8qah/18/
Another alternative is to set a line-height on the hidden text that is at least twice the height of the element. But if you have a nested element with text as you do here, you will need to reset the line-height in that nested element. Example of this: http://jsfiddle.net/N8qah/19/