I have a box which flips on click. There's also an image inside that zooms on hover, shown in this fiddle.
The problem is the zoom transition on the image which is hidden is briefly displayed when I put the mouse out or back in.
My attempt to fix it:
#box.flip:hover img{
-webkit-transform: none;
}
But this one resets the image before the flip transition is done which looks ugly.
Just add z-index:
#box.flip .amount{
-webkit-transform: rotateX(0deg);
z-index:999;
}
http://jsfiddle.net/aJY34/3/
Related
I've tried searching for a solution to this problem, but haven't found one yet.
What I'm trying to do is simple:
When I click one button, I'd like a box to move 200px to the right with CSS transitions. When I click a second button, I'd like the box to move 200px down from the position it is currently in.
I have this basic code here:
HTML
<button class="one">First</button>
<button class="two">Second</button>
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 2s;
}
.box.transOne {
transform: translateX(200px);
}
.box.transTwo {
transform: translateY(200px);
}
JS
$(".one").click(function() {
$(".box").toggleClass("transOne");
});
$(".two").click(function() {
$(".box").toggleClass("transTwo");
})
However, when I click on button number two, the box does move 200 down, but it moves diagonally back to the first X axis position while it's going down (I.e. it doesn't stay 200px over on the X axis).
Is there a way I can possibly do this with keyframes? Like triggering a second keyframe with a second button click, etc. Or is there a better way? I'm pretty stumped and can't find any solutions, so any help is much appreciated. Thanks!
SHORT ANSWER
set the translation X in class .transTwo too
.box.transTwo {
transform: translate(200px 200px);
}
EXPLANATION
the transform is overriding the others, this is the nature behaviour of the css, just like other property color, background-color,
The basic rule is the latest property set is the strongest, the strongest is at inline style unless you implement !important
I was creating a custom photo gallery, and suddenly faced this problem. If you create a #keyframes animation it can't be played the reverse way.
For example: You have an animation, which enlarges the square through scale(). If you hover it the square smoothly enlarges, but if you move the mouse out, your square will bounce back without animation.
Is there a way to reverse the animation on the back route? Transitions aren't working properly in my case. Thanks.
if you want to enlarge and image, you don't need to make an animation using #keyframes. you just make the image scales when hovering over it and make it scales slowly using CSS transition, for example:
img:hover {
transform: scale(2);
}
img {
transition: all 1s;
}
.image{
margin:400px;
padding-top:5px;
overflow:hidden;
transition-duration:0.9s;
transition-property:transform;
}
.image:hover{
transform:scale(2.5);
}
<img class="image" src="download.jpg" alt="a" />
Description:
The page consists of three main boxes: header at the top, menu at the right and content area.
Header and menu have to be with property position: fixed
Initially menu is hidden on the page. It appears when user clicks e.g. on a specific button.
When it's appearing it's sliding from the right to the left. At the same time header and content pushed to the left.
Solution based on:
Using CSS3 properties transform with translate3d values and transition: transform 0.5s linear
The problem
During animation between menu and content with header boxes we can see blinking white area. Playing with backface-visibility didn't help.
JSFiddle
Here is an example online: http://jsfiddle.net/milax/5uc7or6r/6/
Browser
Chrome 39
What might be caused that? What's done wrong... Thanks in advance.
Add the below:
.site-wrapper div {
transition: transform 0.5s linear;
backface-visibility: hidden;
outline: 1px solid transparent; /* <--- fixes horrible anti-aliasing */
}
Demo Fiddle
Fixed.
The problem was in using percents instead of pixels for the property translate3d. So,
transform: translate3d(100%, 0, 0);
must be changed to
transform: translate3d(200px, 0, 0);
Of course, if you know a width of menu exactly.
I have a very odd problem that I only observe with Safari, on a touchpad.
When scrolling down, my navbar fades in / down via CSS transition. If I happen to scroll back up, thus removing the class responsible for the transition, the navbar gets stuck visually in the wrong place, only on safari. The CSS / styles say the correct values, and even the hover/click handlers are in the right place.
That is, In the image below, my mouse is hovering at the blank white area, while the navbar stuck below gets highlighted.
There are several odd things about this:
The element is the navbar via global styles, yet only happens on this particular page.
I can't seem to trigger the problem via scrolling with the mouse.
I can only trigger it via very subtle trackpad movements, or fast trackpad movements.
Any suggestions on how to fix this?
Relevant CSS
.is-sticky-slide-down {
#include experimental(animation, fadeInDown .3s ease-out 0s);
}
#-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
The problem was due to enabling -webkit-backface-visibility: hidden on elements. Removing this "fix" for hover glitches (like twitching opacity fades) fixed the other glitches on Safari.
To be clear, the fix is to remove -webkit-backface-visibility from affected elements.
Inspired by Design Shack, I wanted to have some linkable photos zoom in slightly when hovered over. However, I want the animations to be centered, so it's like we're zooming in slightly.
In order to keep the image centered, I fiddled with top, left, margin-top, and margin-left to make it work. I'm not even sure how it works :-) but it works...
...except that the animation is actually kind of choppy and jumpy, at least in Safari - worst of all in Safari on 10.9. (Firefox and Chrome do a better job though.)
Check out the example here:
http://jsfiddle.net/MnHVk/1/
The salient piece:
.card img:hover {
height:110%;
width:110%;
top:10%;
left:-10%;
margin-top:-10%;
margin-left:5%;
}
Compare the jumpy animation to the version that doesn't try to center, here:
http://jsfiddle.net/MnHVk/2/
Can anybody think of any other way to do this hover animation that won't result in such a jumpy effect? Perhaps there's some other technique for adjusting the positioning so that when the image is hovered over, it moves smoothly?
If you use transform, it should render thru the GPU, and I think, smoothly
.card img:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
transform-origin:50% 50%;
}
updated demo