So, this is my CSS:
img.buttonImg {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
img.buttonImg:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
Yet no animation seems to happen, the image isn't rotating at all on FireFox, but on other browsers it does.
Here is your problem - demonstrated by this example.
The transition doesn't work when hovering over the img element because of the fact that it is within a button element. I assume this is a rendering issue, as this only seems to be the case for FF. It works fine in Chrome and other modern browsers.
As for a solution, removing the img element from the button will obviously solve the problem.
Alternatively, you could add the rotation transition effect when hovering over the button as opposed to the child img element. Updated example - it works in FF.
button.t:hover img {
transform: rotate(360deg);
/* other vendors.. */
}
Both solutions work; however, I don't even know if it is valid to have an img element within a button element. This is probably the reason for the rendering bug; if it even is a bug.
Related
I've been trying to use a transition-delay when moving from "state A" to "state B" but not having that delay when moving back to state A. This is a general question though about whether the CSS spec says that the settings for a transition should be those when the transition starts or those from the state which is being transitioned to. Here is an example:
.menu {
transform: translateX(0%);
transition: transform 1s ease-out;
}
.menu.is-open{
transform: translateX(100%);
transition: transform 5s ease-out;
}
Should the opening animation animation take 1 second or 5 seconds?
My code is slightly more complicated as it uses a delay, but basically it boils down to this.
.menu {
transform: translateX(0%);
transition: transform 0.5s ease-out 0;
}
.menu.is-open {
transform: translateX(100%);
transition: transform 0.5s ease-out 0.5s;
}
When I try this in Chrome or Firefox I get a delay when opening the menu and no delay when closing the menu, but in IE11/Edge it behaves as it would without the delay set. So I'm not sure whether this is a browser bug, or whether I've misunderstood how transitions work, hence my more general question about which transitions are used.
It should be transition: transform and not transition: translate
The transition rule accepts CSS properties not values
Try reversing the order so that the .menu gets the half second delay
.menu{
transform: translateX(0%);
transition: transform 0.5s 0.5s ease-out;
}
.menu.is-open{
transform: translateX(100%);
transition: transform 0.5s 0s ease-out;
}
As for not working in IE, see vendor prefixes for transition and transform
Seems like you understood correctly how transition works. See my code snippet:
JSFiddle
.hoverable {
height: 50px;
background-color: yellow;
}
.moving {
width: 100px;
height: 100px;
background-color: red;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-webkit-transition: transform 1s linear 0s;
transition: -ms-transform 1s linear 0s;
transition: transform 1s linear 0s;
}
.hoverable:hover + .moving {
-webkit-transform: translateX(200%);
-ms-transform: translateX(200%);
transform: translateX(200%);
-webkit-transition: transform 0.5s linear 0.5s;
transition: -ms-transform 0.5s linear 0.5s;
transition: transform 0.5s linear 0.5s;
}
<div class="hoverable">Hover me</div>
<div class="moving">I can move</div>
Maybe transition-timing-function: ease-out seems like delay for you in some cases, so I used transition-timing-function: linear in my example to show the transition with a constant speed.
The red block moves from 0% to 200% for 0.5s with 0.5s delay. And moves from 200% to 0% for 1s without delay. There is no any magic with how transition works.
When you hover over image1div, it scales to 0.95 and fades to 80% opacity. It works in Chrome and Firefox but not Safari. It fades and scales instantly in Safari rather than smoothly in 0.5s.
.image1div {
width: 350px;
height: 350px;
margin-top: 0px;
float: right;
background-color: #5a89ad;
background-size: cover;
filter:alpha(opacity=100);
-webkit-transform: scale(1,1);
-ms-transform: scale(1,1);
transform: scale(1,1);
-webkit-transition: opacity 0.5s ease, transform 0.5s ease;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.image1div:not(.no-hover):hover {
-webkit-transform: scale(0.95,0.95);
-ms-transform: scale(0.95,0.95);
transform: scale(0.95,0.95);
opacity:0.8;
filter:alpha(opacity=80);
}
I think it has to do with the filter property.
Transition is supported by safari: http://caniuse.com/#feat=css-transitions
Also the filter property, but you need to add a prefix: http://caniuse.com/#feat=css-filters
Let me know if it helps, if not, provide more details and we will find a workaround.
-- EDIT
Instead of transition: opacity, transform. Use all, or check out how you can add multiple properties CSS transition shorthand with multiple properties?
There's a problem using css transitions, watch here:
http://jsfiddle.net/vwtqhbt2/
Using styles:
.hexagon-in2:hover .polygon{
transform: rotate(30deg);
bottom: 0px;
}
.hexagon-in2 .polygon{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
On FF and Chrome - the same effect on hover, i didn't applied any bluring effect but on hover you can see it. Any suggestions how to solve it?
Edit: found a better (or shorter?) solution.
Just simply remove transform: rotate(30deg); in your
.hexagon-in2:hover .polygon{
transform: rotate(30deg);
bottom: 0px;
}
so it will be like this
.hexagon-in2:hover .polygon{
bottom: 0px;
}
http://jsfiddle.net/vwtqhbt2/2/
Old solution
There is a way to remove the difference effect before and after transition. That is use translateZ(0)
like
transform: rotate(-60deg) translateZ(0);
-webkit-backface-visibility: hidden; /* optional */
http://jsfiddle.net/vwtqhbt2/1/
but your image always blury. If you dont want that blurry, I can suggest using another CSS trick to make hexagon. Because the blur cause by the transform of your image. It got rotated several times.
In this case try to use Triangle css trick, sizing it then put 4 triangles at the 4 corners (you need it in the right size or else it wont look like hexagon) . Give them high z-index to cover the corners of the box. Then style stuff inside.... Voila~~
4 red triangles will be in these positions to simulating the hexagon
I m trying to make a simple hover effect with some images in an html website.
The plan is : When you hover over an image , the image shades and some details appear.
The css code is this.
/* Hover overs */
.folio4:hover .face {
opacity:1;
cursor: pointer;
}
.folio4:hover img {
opacity: 1;
}
.folio4:hover h2 {
opacity: 1;
}
.folio4:hover a.icon {
opacity:1;
transform: translateY(75px);
-webkit-transform: translateY(75px);
-o-transform: translateY(75px);
-ms-transform: translateY(75px);
transition: 500ms;
-webkit-transition: 500ms;
-o-transition: 500ms;
-ms-transition: 500ms;
}
.folio4:hover a.icon2 {
transition: 500ms;
-webkit-transition: 500ms;
-o-transition: 500ms;
-ms-transition: 500ms;
transform: translateY(75px);
-webkit-transform: translateY(75px);
-o-transform: translateY(75px);
-ms-transform: translateY(75px);
opacity: 1;
}
It works on all browsers except mobile Safari. What can I do for this to work?
Thanks in advance for every answer.
As far as I know it, the hover effect can not work with mobile devices, due to the fact that the system does not see the hover effect, as you know it from your computer.
The only thing you can do is, is to set that hover effect as a on click effect only for the responsive design of your page, so the user has to tap on a picture and gets the details then.
Sorry if this is not the solution
Please test the following fiddle in Safari or Chrome as well as Firefox. You will notice that the animation is smooth in Safari, even after the mouse is no longer hovering over the div (when the div has moved past the mouse). In Firefox, however, once the div moves to where the mouse is no longer touching, it begins to move back to its original position, thus causing an unsightly shake. Can I use JavaScript to resolve this issue?
jsFiddle
#object01 {
position:relative;
margin-top:10em;
width:300px;
height:300px;
background-color:red;
border:2px solid black;
transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-o-transform:rotate(5deg);
-ms-transform:rotate(5deg);
z-index:1000;
transition:all 1s ease;
-webkit-transition:all 1s ease;
-ms-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
top:0;
}
#object01:hover {
transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-moz-transform:rotatate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
top:-250px;
}
To avoid need to change the markup, you can add a pseudo-element and animate in in the opposite direction, so it will 'hold the active area' when the main element is moved:
#object01:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
#object01:hover:after {
-webkit-transform: translateY(250px);
-moz-transform: translateY(250px);
-o-transform: translateY(250px);
-ms-transform: translateY(250px));
transform: translateY(250px);
}
(fiddle)
Also, there are several observations that animation has better performance and goes smoother if animating transform: translate(...) than if animating top/left: 1, 2. And it's better if the unprefixed property goes after the prefixed ones (because if the browser supports both prefixed and unprefixed syntax, there are more chances for the prefixed implementation to be buggy than for the unprefixed one). And there is no need to specify -ms-transition since IE9 doesn't understand it, and all shipped versions of IE10 support the unprefixed syntax.