I am following a CSS3 transition tutorial: here
I cant manage to get this to work without having to hover. Does anyone have any idea how I could have this same effect from this tutorial without having to hover on the body?
Thanks
You can simplify the answer from #Rufus by simply putting the 'test' class on the body directly in the markup. There's no reason to add it with javascript later.
If you were using css3 transition, then you WOULD need to add the transitioned class after page load, but since you are using keyframe animation, you don't need to wait before adding it.
Here's the example from #Rufus modified to show what I'm talking about: http://jsfiddle.net/mALEC/2/
Related
I have an SVG image inside my GWT application. For this I'm using lib-gwt-svg.
I can target elements by ids, add styles to them, no problem with that.
But I tried to animate using "skewX" and that is, what went wrong.
I have a barrier, that I want to open using that skewX property. I add the style, it animates to open. It also closes without problem. But when I change the presenter, and then return back to the SVG image, the barrier moves to different position. It can be fixed by closing and opening it again.
I tried using matrix, with the same result. I also found out, that it is caused by SVG elements using different coordinates for positioning. So when I apply CSS style (skewX), it uses CSS style for the SVG and it works correctly. But when I leave the presenter and return, those CSS styles are now handled like SVG styles, thus making the barrier display wrong. When I open or close the barrier, CSS styles are re-aplied and it is all ok again.
I tried some hacks, like re-apply styles when returning to SVG, but it makes no difference, as I'm adding the same style to the the SVG so it doesn't care. It only refreshes when I add diferent transformation, from the one already present.
I tried to work around this by using the "transform" attribute of SVG with calcutaion of the coordinates necessary for translate after skew. How to do that I found here: How to set transform origin in SVG
It works nicely, but there is no animation whe using this approach.
Any idea how to force SVG to refresh its styles? Only sollution I can think of is change its style from skewX(0.1) to skewX(0.11), which is different, so it refreshes, but when to apply it is also the question. Even when I apply it in Scheduler.get().scheduleDeffered, it doesn't work. If I apply it on button click, it works.
This is a very general question, so I have not provided a code.
I was trying out various CSS animations yesterday, however, I was unable to control any of them using the :hover pseudo element in CSS. I basically wan't to slow the animation when a user brings his/her mouse onto the division.
Pure CSS solution will be appreciated. :) thanks in advance.
There is no "comon way" to do this. You will need to find some workarounds.
The most common workaround to slow a CSS animation down on hover is to apply the same animation on the element and it's parent and pause one on hover with the animation-play-state: paused;. (or the other way around with animation-play-state: running;)
EXAMPLE (comes from this answer : Change the Animation speed on hover)
As you can imagin this can't work for all animations and you will need to be creative in each situation to find a solution for this.
Is it possible to create a Javascript-like scrollTo effect using only CSS3? For instance:
Button
And somehow telling the window to smoothly scroll to that location? Using Javascript it is very easy, but CSS would be even more wonderful.
I can’t think of any way to do it.
CSS’s animation facilities only allow you to change CSS properties, and there aren’t any that let you refer to the position of elements on-screen, or how much the page is scrolled.
The only way CSS can respond to elements being clicked on is via the :active and :visited selectors, and using :visited to animate a link doesn‘t seem to work.
You can use :active to animate the bottom margin of a link, but the animation will only run whilst the user is holding down the mouse button. See http://jsfiddle.net/w5kcr/1/
I am having a little trouble achieving a very simply fade effect using CSS3. Here is my scenario:
I have a list a with some content in it. I also have some links, that when clicked filter the content in the list. What I would like is, when the page loads the list fades in, and every time the list is filtered, the list should disappear and than fade in with the new content.
I got the fade in on pageload working. However when I try to get the list to disappear and fade in again, I cant get that to work.
Here is a jsfiddle I created to demonstrate what I am trying to do. - http://jsfiddle.net/YeKX2/28/
Any help on this is appreciated.
Keeping it primarily webkit based and not using jQuery as you seem to be, you could do the following to achieve your goals:
function test(){
document.getElementById('list').style.opacity = "0";
setTimeout("document.getElementById('list').style.opacity = '1';",2000);
}
You'll have to play around with the timing.
Also, to note, if you want to effect the timing of the -webkit-transition, you can use the following syntax.
document.getElementById('list').style['-webkit-transition'] = "opacity 2s linear";
I highly recommend including the jQuery library if at all possible. Then fading is as easy as:
jQuery("#elementId").animate({opacity:0});
jQuery("#elementId").animate({opacity:1});
Otherwise you'll end up with browser issues as opacity is handled differently in some browsers(IE) and webkit-transition is an experimental mozilla property.
Looking at http://www.css3maker.com/ I see the menu items like "Border Radius" getting animated on mouseover. How was this achieved using CSS?
I did not look how it was done in that website. But jQuery can do wonders with animation. It's a javascript API that is becoming widely used.
CSS animations can be done using the transition property.
Check http://www.css3creations.com/ for demos.