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
Related
I built a video player. It works fine on every browser but safari.
I add the transform scaleX to the volume container so when I hover on it, it will work as on youtube video volume
When not hover:
width: 0;
transform: scaleX(0);
-webkit-transform: scaleX(0);
transform-origin: left;
transition: width 150ms ease-in-out, transform 150ms ease-in-out;
-webkit-transition: width 150ms ease-in-out, transform 150ms ease-in-out;
When hover:
width: 0.5rem;
transform: scaleX(1);
-webkit-transform: scaleX(1);
But when not hover, the display flex property of this volume container is not working by somehow. The animation and transform on hover still work normally:
image of problem
I expect the result will be like this:
expected outcome
Can anyone help me? I will be very grateful
Here's the link to test website: https://vinasports-web-player-test.vercel.app/
FIXED
by add an value to width:
width: 0.0001px
I don't know how but it worked. Can anyone explain to me?
There have been questions about the absolute timing precision of CSS transitions and about removing jitter for inexpensive simultaneous transitions. However, the answers didn't give me a clear idea of the relative accuracy of the animation timings (e.g. if two simultaneous animations are "in-phase"), especially when the transitions get expensive.
The effect is most obvious when working with images, like in this fiddle, where the image and container are moving in opposite directions simultaneously trying to keep the image in the same absolute position, but the asynchrony is causing jitter:
/* CSS */
#container {
position:absolute;
width:200px;
height:200px;
left:200px;
overflow:hidden;
background-position:-200px -150px;
-webkit-backface-visiblity:hidden;
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
-o-transition:all 2s ease-in-out;
transition:all 2s ease-in-out;
}
/* JS */
$(function() {
$('#container').css('left', 0).css('background-position', '0 -150px');
});
Curiously, the jitter is consistently to the right of neutral, which means that the image animation phases are a tad ahead of the container's. It's kind of hard to see, but comparing the offset frames to the stationary final frame, the direction bias is visible.
Is there any way to make sure each step of both transitions are rendered simultaneously?
I think what you are seeing is referred to as Jank.
It happens because of the CSS properties you are trying to animate. Both of these 2 CSS properties i.e. left & background-position trigger paint & compositing operations. Additionally, left property triggers layout as well.
Have a read on the subject of High Performance Animations and also take a look at which CSS properties trigger which operation over at CSS Triggers.
As a solution, you might want to animate translateX instead of left property. The result will be a little better but we would still have background-position to deal with which would keep triggering the heavy operation of re-painting.
I think the best solution, in my humble opinion and I could be completely wrong in approaching it, is to have an img tag inside your #container element, provide the image as its src and remove all the background related properties from your CSS.
And then move it as well using the same translate mentioned above. This way, hopefully, you will get the smoothest of results.
Take a look at this updated fiddle or the snippet below.
Snippet:
$(document).ready(function() {
$('#container').css({
'-webkit-transform': 'translateX(0)',
'-moz-transform': 'translateX(0)',
'-o-transform': 'translateX(0)',
'transform': 'translateX(0)'
});
$('#container > img').css({
'-webkit-transform': 'translate(0px, -150px)',
'-moz-transform': 'translate(0px, -150px)',
'-o-transform': 'translate(0px, -150px)',
'transform': 'translate(0px, -150px)'
});
});
#container {
position: absolute;
width: 200px;
height: 200px;
left: 0px;
overflow: hidden;
-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#container > img {
-webkit-transform: translate(-200px, -150px);
-moz-transform: translate(-200px, -150px);
-o-transform: translate(-200px, -150px);
transform: translate(-200px, -150px);
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
body,
html {
margin: 0;
width: 100%;
height: 100%;
}
span {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<span id="container">
<img src="https://images.unsplash.com/photo-1448975750337-b0290d621d6d?crop=entropy&dpr=2&fit=crop&fm=jpg&h=775&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450" />
</span>
P.S. As a side note, I am a big fan of GSAP (a JavaScript animation suite of tools). Here is another example using TweenMax (one of the tools from GSAP) which animates x property (a shorthand for translateX within the GSAP world and which also takes care of all the browser prefixes for you behind the scenes) in a more intuitive way using .fromTo() method.
I'm trying to have a menu that has a submenu and this is what I have for the moment (it's more complex than this), I want to use the transition property:
.product:hover #button-option {
visibility: visible !important;
}
#button-option {
visibility: hidden;
-webkit-transition: visibility .2s;
transition: visibility .2s;
}
Here is my jsfiddle: http://jsfiddle.net/4bsmq2kg/
I want my submenu to appear a little later, or like take some time to appear like in here: http://www.vmware.com
How could I make this work? I tried several things but none has been working. Thanks!
EDIT: I'm actually stupid and didn't realize a mistake there was in the code, but I still cannot find what I really wanted to find.
Visibility will transition, but only in binary (on/off) fashion. Perhaps you want to transition on opacity in addition (since visibility needs to be off to prevent mouse detection on the element). You probably also don't need/want the !important. Also, unless you are targeting old browser versions, you don't need the webkit-transition prefixed property (if you're going to specify it, should be -webkit-transition).
Visibility will not animate well. For that you might better animate opacity:
#button-option {
opacity: 0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.product:hover #button-option {
opacity: 1;
}
If you want the menu to slide from left to right, then you can also animate position:
#button-option {
left: -300px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.product:hover #button-option {
left: 0px;
}
You can check for more detail here.
At the end, I mixed opacity with visibility, thank you all! going to try some of your suggestions too, Good Night!
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.
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.