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!
Related
I'm doing a hover effect that increases the images brightness and scales the image on hover state. For some reason the transform seems to choppy with the CSS filter. Any idea why this makes the transform choppy? Seems to be working smoothy on Safari and Firefox.
Basically I'm doing this:
.parent
width 300px
height 300px
overflow hidden
img
transition: all 1s ease-out
transform: translate(0px, 0);
filter: brightness(80%)
&:hover
transform: scale(1.1)
See full demo here: http://codepen.io/tzzo/pen/MmKeVm
Thanks.
Just had a look at the codepen on Chrome 56 and it's really smooth for me. However, if you want to increase the image brightness on hover you need to add the filter to the hover too:
img:hover {
-webkit-filter: brightness(100%)
filter: brightness(100%)
}
use this code in hover proerties-
.parent img:hover {-webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); opacity: 1.0; filter: brightness(150%);}
I can't see the issue on my machine but I have had this problem at other times
You could try triggering hardware acceleration on the element by adding transform3d
.parent
width 300px
height 300px
overflow hidden
img
transition: all 1s ease-out
transform: translate3d(0,0,0)
filter: brightness(80%)
&:hover
transform: scale(1.1) translate3d(0,0,0)
Note you need to re-apply the translate when you alter the transform in the hover rule
I came up with a lightweight and well supported implementation.
I ditched CSS filters and decided to use opacity instead. If the background of the image doesn't work well with the you have to set it separately.
img
background-color: black
opacity: 0.8
transition: all 3s ease-in-out
&:hover
opacity: 1
transform: scale(1.1)
Added working solution to my pen: http://codepen.io/tzzo/pen/MmKeVm
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 am trying to merge a few different CSS transforms on an H3 element. The initial transform is to rotate the text -45deg, while the second set is sliding and fading the element in place.
h3 {
-webkit-transform: rotate(-45deg); // rotate text
-webkit-transition: -webkit-transform 0.6s, opacity 0.6s; // use when element is in view
}
// use when element is in view
.about-trans {
h3 {
opacity: 0;
-webkit-transform: translateY(-60px);
-moz-transform: translateY(-60px);
transform: translateY(-60px);
}
}
If you wish to have multiple transofrmations applied just concatenate them like in the CSS below:
h3 {
-webkit-transform: rotate(-45deg); // rotate text
-webkit-transition: -webkit-transform 0.6s, opacity 0.6s; // use when element is in view
}
// use when element is in view
.about-trans {
h3 {
opacity: 0;
-webkit-transform: translateY(-60px) rotate(-45deg);
-moz-transform: translateY(-60px) rotate(-45deg);
transform: translateY(-60px) rotate(-45deg);
}
}
You can also write your transform as Transform matrix. The shortest version of concatenated Transform would be, if you multiply these matrices.
That way, you would have only one transform with one matrix in each definition.
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