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
Related
I have a div with the following hover effect: transform: rotateY(180deg); so it's a container that flips on mouse hover. How can I make it so that instead of rotating instantly 180deg, it would slowly rotate 10deg, and then if the mouse is still hovering it, 180deg?
.flip-card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
You can achieve this by making an animation instead of a transition.
Make sure to use animation-fill-mode: forwards so that the animation stays in place until you stop the :hover. I used 30deg for demonstration purposes.
In your animation, make sure it starts on transform: rotateY(0deg) so it animates from 0deg to 30deg as well (optionally you could just apply transform: rotateY(0deg) directly on .flip-card-inner and start the animation at #keyframe 10%).
Play a bit with the #keyframes values and the animation-duration-property to adjust it to your liking.
.flip-card:hover>.flip-card-inner {
/* Shorthand for animation-name, animation-duration, animation-fill-mode */
animation: flip 2s forwards;
}
.flip-card-inner {
border: 1px solid black;
height: 100px;
width: 100px;
transform-style: preserve-3d;
}
#keyframes flip {
0% {
transform: rotateY(0deg);
}
10% {
transform: rotateY(30deg);
}
70% {
transform: rotateY(30deg);
}
100% {
transform: rotateY(180deg);
}
}
<div class="flip-card">
<div class="flip-card-inner">card</div>
</div>
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/
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 have a CSS3 Animation for an indeterminate progress bar. In the animation I have a gradient oscillating back and forth along the progress bar. I would like to flip the image of gradient horizonally as it travels back to the left side of the progress bar. Basically the gradient always fades out the opposite direction the image is moving. Unfortunately I can't figure out a way for the image to flip horizontally BEFORE it starts moving back towards the left and am getting some odd transformations of the image as it flips.
I have created a JSFiddle to show how it looks right now.
http://jsfiddle.net/MtWzL/
Here is the CSS I'm currently using for the animation:
#-webkit-keyframes loader {
0% {
-webkit-transform: scaleX(1);
-webkit-transform: translateX(-100px);
-webkit-transform-origin:left;
}
50% {
-webkit-transform: translateX(300px);
}
100% {
-webkit-transform: translateX(-100px);
-webkit-transform: scaleX(-1);
}
}
#keyframes loader {
0% {
transform: scaleX(1);
transform: translateX(-100px);
transform-origin:left;
}
50% {
transform: translateX(300px);
}
100% {
transform: translateX(-100px);
transform: scaleX(-1);
}
}
.slider
{
animation: loader 2.5s infinite linear;
-webkit-animation: loader 2.5s infinite linear; /* Safari and Chrome */
background: url('http://s23.postimg.org/mglkwgxuv/indeterminate_bg.png') no-repeat;
border-radius: 10px;
height: 10px;
position: relative;
width: 100px;
z-index: 999;
opacity: .6;
}
.container {
background: -webkit-linear-gradient(#00c3ff,#0071bc);
background: linear-gradient(#00c3ff,#0071bc);
border-radius: 3px;
height: 10px;
overflow: hidden;
width: 300px;
}
.background {
background: rgba(0,0,0,0.7);
border-radius: 3px;
display: inline-block;
padding: 10px;
}
There are 2 issues that need to be fixed
first of all, this
-webkit-transform: scaleX(1);
-webkit-transform: translateX(-100px);
won't work as you expect; the second property over-rides the first one, as you can not set 2 different values for a property in separate lines.
the correct syntax would be
-webkit-transform: translateX(-100px) scaleX(1);
And second, if you want a sudden change in some value, you need to set it from a keyframe to another keyframe close enough to the first one.
So, the solution would be
#-webkit-keyframes loader {
0% { -webkit-transform: translateX(-100px) scaleX(1); }
50% { -webkit-transform: translateX(300px) scaleX(1); }
51% { -webkit-transform: translateX(300px) scaleX(-1); }
100% { -webkit-transform: translateX(-100px) scaleX(-1); }
}
corrected fiddle
I have corrected only the webkit transforms, but the same concept applies to the rest.
I was watching for your problem since you put it here, but I guess its some kind of bug we won't solve or maybe I just dont understand why it is working like that.
Since I had no clue how to solve it I manage to do example for you with alternative solution
EXAMPLE
As you can see I modified your jsfiddle, simple words, created another slide loader .sliderBack that goes backwards. Hope it will helps you somehow. Peace :)
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