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.
Related
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've searching for a while, but didn't find a solution.
The problem is that I need css triangle with fixed height (50px) to be stretched on 100% width of the div.
Surely, it can be done via js or jquery, or by replacing with svg, but is there any pure css solution for this?
Pure CSS triangle is manageable via borders, and borders doesn't support thickness in percents. So I guess it's impossible.
I want to work over the image, but instead it just gets forced down below any content.
Swiffy animations are not images. CSS background-image requires an image, as the property name implies. So the answer is no, it's not possible.
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/
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.