There are lots of css3 fade in/fade out animation out there. Is there something that would do fade-in-out with no trigger (e.g. no hover or click) that runs itself with animation-duration?
Thanks,
B
You should comsider css3 animation framework. There lots of codes for it.
Also consider animation of opacity (from 1 to 0)
Related
I am in the process of converting some animated GIF animated spinners to animated SVG for better/sharper display on Hi-DPI screens.
One issue I've run into is that when a user starts navigating to another page, an animated GIF continues animating but an animated SVG freezes. So if I want to have an animation that shows the next page loading, I can't find a way to get away from using GIFs.
Is there a way to have SVG animations continue animating during page navigation?
(I am specifically using Chrome for this, because if it doesn't work in Chrome I can't use it.)
EDIT: The SVG uses SMIL to do the animation.
UPDATE
After receiving no responses on this, I can't find a way to keep SVG animations animating during navigation, so I have adopted a different approach, which is to use CSS animations.
CSS animations continue animating even after navigation starts. They are a little harder to deal with, as far as inserting into a page and integrating with other elements, but they do the trick.
I'd like to animate some CSS styles not supported by {N}.
For example, text-color, height of an element etc.
Any suggestions, ideas as to how this could be done.
A simple linear animation would be fine.
Thanks.
I've been trying to accomplish this for like two weeks now. Does anyone here have any idea of how do this? I won't even paste my code because it's the worst ever.
Thanks.
Have you check fullpage.js?
You might be able to get the same scrolling effect by creating your own CSS3 function with the CSS Easing Animation Tool of Matthew Lein.
Then pass it to the parameter easingcss3 of fullPage.js.
easingcss3: 'cubic-bezier(1.000, 0.000, 0.000, 1.005) 0.5s',
Or, if you prefer, you can go for jQuery easing effects and use css3:false. (although it will be smoother with css3)
Regarding the elements dissappearing on scroll, you'll have to do it by yourself by animating them on a callback such as onLeave or by using the classes added to the body as in this example.
body.fp-viewing-page2-slide1 #section1 .moveOut{
transform: translate3d(0, -400px, 0);
}
Something in this line.
I'm setting up a portfolio webpage, and I want the images to be coloured with a colour from the logo 50% solid until mouseover, which makes the colour fade out and reveal the image properly.
Here's the site so far; www.cmvisual.com
Anybody know how to do this?
It seems like you probably want to put a div with a background color and partial opacity
over the image, and then use a CSS transition (preferably) or Javascript to animate the transition.
Maybe start at half opacity, then go to 0 opacity on rollover.
What you REALLY want is CSS blend modes, but that isn't fully supported yet.
I'm using css animations on my page and Safari seems to change unrelated font weights elsewhere on the page when animations are running. Any idea why this happens? All other browsers work fine, include webkit ones like Chrome.
I've detailed the bug in a video here - http://www.screenr.com/gZN8
The site is also here - http://airport-r7.appspot.com/ but it might keep changing rapidly.
I'm using compass (#transition-property, #transition-duration) on the arrow icons. No transitions applied on the heading that's flashing. On a Mac - so it might be the hardware acceleration, but I'm still trying to figure it out.
When you trigger GPU compositing (eg, through CSS animation), the browser sends that element to the GPU, but also anything that would appear on top of that element if its top/left properties were changed. This includes any position:relative elements that appear after the animating one.
The solution is to give the animating element position:relative and a z-index that puts it above everything else. That way you get your animation but keep the (superior IMO) sub-pixel font rendering on unrelated elements.
Here's a demo of the problem and solution http://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1
Update: Newer versions of Chrome retain sub-pixel antialiasing on GPU composited elements as long as the element has no transparency, eg has a background with no transparent or semi-transparent pixels. Note that things like border-radius introduce semi-transparent pixels.
Apparently, that's the price you pay for hardware acceleration: all text momentarily turns into images, which causes the drop in render quality.
However, applying html {-webkit-font-smoothing: antialiased} to turn off the sub-pixel anti-aliasing makes this problem go away. That's what I'm doing for now.
UPDATE: Since then, I've also come to learn that this happens only when the browser can't be sure if the section being animated is going to affect the text. This can usually be handled by having the text above (higher z-index than) the elements being animated, and/or making sure the text has a fully opaque background.
I've faced this issue numerous times and have had success adding the following css to the animated element:
z-index: 60000;
position: relative;
It seems it needs both z-index and position to be effective. In my case I was using it with Font Awesome animated spinners.