I have a series of objects all of which have different scaled value using the css 3 transform tag. My problem is that when I try to attach an animation on hover (in this case its a rotation) they return to their original/unscaled value i.e they all have the same size.
I am using a common keyframe animation for all the objects to save up on coding time and neatness.
Any hero has a solution?
Make sure that :
the keyframe does not have the scale property that set the scale rate back to 0.
You didnt miss a ; at the end of a line, and you didnt do any syntax mistake.
try to share your css code so we can find the problem.
Related
I am trying to get a given Line (or Path) object made in react-native-svg to appear.
Normally one would use stroke-dasharray and stroke-dashoffset to hack an effect. I applied those as a style to the Line/Path but it didn't seem to be applied.
How can I animate a set of lines/paths with css in react-native-svg? Ideally without having to manually animate each of them myself.
I'm writing a "3D navigation" where moving the mouse cursor subtlely rotates the contents of the screen. When something is clicked I want it to zoom (scale).
The rotation is achieved with transform property, and evoked when the cursor moves. This part works fine!
Now I want the scale to be animated at 500ms. But if I set this transition speed, it wrecks the nice smoothness of the cursor move property.
I tried solving with JavaScirpt, but the problem is that if I start working the "scale" segment alone, it overwrites the rotation property. CSS doesn't remember that I've set the rotation at some point, if I set transform again, during animation, with only the scale.
I have a work-around, but I don't think it's very nice and I suspect it will difficult to understand and refactor it in the future.
So like I can separate the timing for "background" and "color", is there a way to "go deeper", and also separate for the different transform properties?
Thanks in advance!
I found a strange behavior when transitioning between visibility hidden and visible. It seems like when going to visible, it immediately becomes visible at the start of the transition duration. But going back to hidden, it waits until the transition duration has completed before disappearing.
What's the reason for this? Is this something I can rely on, or should I explicitly set their transition delays?
The reason for this is because that is the recommended implementation for transitioning the visible property:
From the W3 for CSS Transitions:
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.
Basically, visible is used whenever the transition percentage is not 0.00 (or 1.00). So, if the transition percentage is, say, 10% (0.1), then it is visible. That is why it becomes visible immediately. The other values aren't recognized until the transition is fully complete, because visible is used during the transition.
Depending on your use-case, you can use transition-delay, you can use a keyframe animation, you can transition the opacity property, or you can try to use cubic-bezier functions.
Basically, I have an element with a given width and height. When I add the "zoomed" class to it, I want it to change its size and position. I got it working with a proper webkit-animation (keyframed).
The problem is that when I remove the "zoomed" class, it suddenly reverts to the original size and position, and I'd love to do it with an animation.
Note that this is an example that could probably be solved with the use of the transition property, but in my real world case, it can't because I have a fairly complex keyframed animation.
So, how to have a basic state, animate to a new state when a class is added and reverse the animation to the basic state when the class is removed? Thanks.
The problem that you have wouldn't be solved with a transition.
What makes a transition work in both ways is that usually you set it in a class, and change properties in an state. This way, you have the transition set all the time, and only change the properties.
If you set the transition in the changed state only, once you remove it, the transition is no longer in the element, and so the change is immediate.
If adding the class is really the procedure that you want (for some other reason), the you have 3 posibilities
As suggested in the comment, in the change to the basic state you should add another class that has as only property the animation playing in reverse.
In the base element set the animation in reverse, in the added class set the animation.
Go to an elaborate system where you really remove the class in the animation end event, and what you do triggers that (way too complicated I think)
There is no way that the element is animated - transitioned - whatever once you remove that from the element
Im browsing the net for more than a day now and still can't find a working solution to the followin problem.
A div should grow from nothing to 100% from the bottom up then
text should fade in
then a timeout
then text should fade-out
then div should schrink towards the bottom of the div and vanish.
.max{
max-height:100%;height:100%;color:#fff;
-moz-transition-property:max-height,height, color;
-moz-transition-duration:3s,3s,1s;
-moz-transition-delay:0s,0s,2s;
}
.min{
max-height:0%;height:0%;color:transparent;
-moz-transition-property:max-height,height, color;
-moz-transition-duration:3s,3s,1s;
-moz-transition-delay:1s,1s,0s;
}
how can I serialize max & min into one CssClass
If that's not possible how to do it in another way.
But that doesn't fly.
Anyone a nice idea or experience with this?
The transition can only work, if your start values and your end values differ.
Because your start values and end values don't differ ('you come from nothing and you go to nothing' (Always look on the bright side of life)) it is not possible in one CSS class.
What maybe possible is that you have two classes say appear and disappear and switch between them after a certain amount of time with javascript (setTimeout function)