I created this SVG and put in some inline CSS to create a hover effect but it doesn't work. The dashed circle doesn't move and rotate, it only changes opacity. In addition, there's no transition on mouse out like normal css transition. How can I fix this ?
.wrap:hover .dash {
opacity: 0.2;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: translateX(10px);
-webkit-transform: translateX(10px);
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transition: 0.3s linear;
}
The link to my code fiddle: http://jsfiddle.net/7s4vszu3/1/
There are a couple of issues here:
First, your transition and transform-origin should be set without the hover selector. This is the reason you weren't seeing the proper transition on mouse out.
Second, you need to include both your transformations in the same rule, so that one doesn't overwrite the other. In your code, your translate is overwriting your rotate.
Here's what it should look like:
.wrap .dash {
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transition: transform 1s linear, opacity 1s linear;
}
.wrap:hover .dash {
opacity: 0.2;
transform: rotate(90deg) translateX(10px);
-webkit-transform: rotate(90deg) translateX(10px);
}
Example here: http://jsfiddle.net/unc3re9b/
Related
I have a modal window which I wrote in ReactJS.I need to realize Fade in Scale effect to this modal window.Something like this (Please look to effect with name Fade in & Scale).
I found a library which realize that effect rodal (Please look to effect with name Zoom) but not in React way ,dynamically removing element from DOM.
So I wrote it from scratch.But I have a problem.When modal fade out scale animation work's but when it fade in it not work's.
Please help.
Codesandbox
My styled component style.
&.fade-in {
opacity: 1;
/* transition: opacity linear 0.15s; */
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
transition: all 0.3s;
}
&.fade-out {
opacity: 0;
transition: opacity linear 0.15s;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
you need to add scale to modal in order to achieve this
Check the sandbok link
you need to add a transform: scale(0); to the main div, this will solve your issues.
I have a picture that I want to scale to 150% and also move 30px down, with a transition. Only the scale seems to work, any help?
img {
transition: transform 250ms;
}
img:hover {
transform: scale(1.5);
transform: translateY(30px);
}
You just need to combine your transform properties
transform: scale(1.5) translateY(30px);
Should do the trick!
So I have this cute little spinner made to signify when something is loading. The perspective changes and the background color are supposed to change at the same time. I am having trouble getting the Transform and Transition timings to line up so that you don't see the color change, it needs to be already changed when the square flips so that it is a smooth transition.
Link to JS Fiddle
HTML
<div class="spinner"></div>
CSS
.spinner {
width: 20px;
height: 20px;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px); background-color: #00b16a; }
50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color: #f22613;}
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); background-color: #aaabae; }
}
#keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
Two things to consider:
Transitions interpolate smoothly (well, according to the easing function) between keyframes.
If you do not specify an attribute at a keyframe, it will interpolate without interruption over that keyframe.
With those in mind, you can change the keyframes to apply your color change in the middle of your perspective change. In addition, you'll set two keyframes for the color change, very close to each other, to ensure the interpolation happens over a small time slice.
#-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px); background-color: #00b16a; }
24.9% {background-color: #00b16a;}
25.0% {background-color: #f22613;}
50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color: #f22613;}
74.9% { background-color: #f22613; }
75% { background-color: #aaabae; }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); background-color: #aaabae; }
}
Now, you'll notice that since you have the animation on infinite repeat, that you still get a color transition when the animation loops from 100% to 0%. You'll have to either specify animation-direction: alternate; or adjust your keyframes so that 100% ends at a reasonable tweening point between 100% and 0%.
DEMO using alternate
I would like my animation to not stop at 50%, how to avoid this short iterruption?
#-webkit-keyframes PLAY {
0% {
-webkit-transform: translate(0px,0);
}
50% {
-webkit-transform: translate(-60px,0) rotate(-1080deg) scale(2);
}
100% {
-webkit-transform: translate(-120px,0) rotate(-2060deg) scale(1);
}
}
.play {
-webkit-animation-name: PLAY;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-out;
}
I think right now it's using ease-in-out, or something similar, for its "timing function".
Try adding this CSS property:
-webkit-animation-timing-function: linear;
2ND EDIT: So now that I see your class declaration it seems the easing is intentional. Since that applies to each phase of the animation though, it needs to be applied a little differently. Here's my full change - you might as well remove the timing function inside of the class:
#-webkit-keyframes PLAY {
0% {
-webkit-transform: translate(0px,0);
-webkit-animation-timing-function: ease-in;
}
50% {
-webkit-transform: rotate(-1080deg) scale(2);
-webkit-animation-timing-function: ease-out;
}
100% {
-webkit-transform: rotate(-2060deg) scale(1);
}
}
1ST EDIT: Actually, having admired your "Meanwhile, at the batcave...!" animation in my test page for a moment, I think there's a bit more to improve. I'm guessing that the translation is meant to offset the off-center spinning caused by the default "center point" position. So, you can add this CSS property, and remove the translations. Then it's not even dependent on image size.
transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
In fact, the 0% can just be "-webkit-transform: none"
Changed to use the correct cross-browser CSS property
I would like to keep the left edge of div.box in the same place during a transformY(-180deg) animation. I can't understand why is it moving. This is the code:
transform-origin: 0% 0%;
transform: rotateY(-180deg);
And here is the live example http://dabblet.com/gist/5551520
You're also transitioning the transform-origin, as you use transition: all, and it is specified in the hover state. The initial value is to be centred.
If you put transform-origin: 0% 0%; on .box it will work as expected.
.box {
/* removed additional styles */
transition: all 600ms linear;
transform-origin: 0% 0%;
}
body:hover .box {
transform: rotateY(-180deg);
}
http://dabblet.com/gist/5551730