I created a simple CSS transition to rotate a div 360 degrees in this page (the disc menu), but it appears to be working only on Firefox Nightly. I also tried in Firefox 15 (the release build) and Google Chrome. Both only move the image to the left a bit and show some graphical artifacts around the overlying text. This is the CSS related to the disc (the rotating image is actually a empty div with set size inside the real menu div):
#menuDisco {
transition: all 0.8s;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
background: url("img/disco.png");
background-size: 100% 100%;
position: relative;
top: 0%; left: 0%;
width: 100%; height: 100%;
color: rgba(0,0,0,0);
}
#menu:hover #menuDisco {
transition: all 0.8s;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
Make sure to include all the prefixes. Transitions have been unprefixed in FF16 and Opera 12.5. (-ms-transition isn't useful because IE9 doesn't support it and IE10 is unprefixed).
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
You also don't need the transition rule in the second style declaration since it is the same as the first.
Related
I am spinning a hamburger menu image by 90 degrees when a user hovers on it. See jsfiddle here
The problem is when the user moves off the image it goes back to its original position, however I want it to transition back to the original position, the same speed it animated originally, providing a smooth transition.
Does anyone know how to do this.
Also see my code below for convenience.
html
<button class="menu-button"><img src="https://api.icons8.com/download/d419bb211b7f4ad40cf595fb3ebc9464cdf2065e/Android_L/PNG/256/User_Interface/menu-256.png"></button>
css
.menu-button img {
width: 50px;
height: 50px;
}
.menu-button img:hover {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: transform 1000ms ease-in-out;
-moz-transition:transform 1000ms ease-in-out;
-ms-transition:transform 1000ms ease-in-out;
}
You're not animating the returned state when the hover is no longer valid.
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
This should do it for ya.
https://jsfiddle.net/r7buoac0/2/
You can accomplish this by setting the initial animation state in the .menu-button img{} So when you're not hovering it will trigger the return animation.
.menu-button img {
width: 50px;
height: 50px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: transform 1000ms ease-in-out;
-moz-transition:transform 1000ms ease-in-out;
-ms-transition:transform 1000ms ease-in-out;
}
.menu-button img:hover {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: transform 1000ms ease-in-out;
-moz-transition:transform 1000ms ease-in-out;
-ms-transition:transform 1000ms ease-in-out;
}
JS FIDDLE
I currently have it like this:
http://jsfiddle.net/9DGb2/
But for some reason if I change the css to this:
div {
width: 200px;
height: 100px;
background-color: yellow;
}
div:hover {
-moz-transform: scale(1.05) slow;
-webkit-transform: scale(1.05) slow;
-o-transform: scale(1.05) slow;
-ms-transform: scale(1.05) slow;
-webkit-transform: scale(1.05) slow;
transform: scale(1.05) slow;
}
It wont work.
So I am guessing it cant be done this way?
You need to add a transition
-webkit-transition: transform 2s ease-in-out;
JS Fiddle Demo
For more information please consult: Using CSS Transitions
transition in other browser
div:hover {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: transform 1.05s ease-in-out;
-moz-transition:transform 1.05s ease-in-out;
-ms-transition:transform 1.05s ease-in-out;
}
I have the following fiddle:
http://jsfiddle.net/cYwkz/
I'm using the following CSS:
article {
border: 2px solid #cccccc;
background-color: #e5e5e5;
border-radius: 5px;
display: inline-block;
height: 150px;
margin: 0 2% 32px;
position: relative;
vertical-align: top;
width: 160px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
article:hover {
-webkit-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
-moz-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
-ms-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
-o-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
}
When I hover the left-bottom part of the articles, the hover and transforms work as correctly. However when I hover over the right-top part, the transform flickers or sometimes doesn't start at all.
I don't have these problems in Firefox.
System: Mac OSX 10.9.1
Works in: Firefox 26, Firefox Aurora 28, IE10
Fails in: Chrome 32, Safari 7.0.1, Opera Next 19
Hope you guys can help! Thanks in advance
The problem arises from the fact that in webkit the plane situated at z=0 gets the hover events (so to speak).
Since your rotation makes the elements (specially the right top part) go away (or inside the screen), they get under the zplane and no longer trigger the hover.
You can solve that moving them towards z positive:
-webkit-transform: perspective(400px) rotateX(5deg) rotateY(5deg)
translateZ(10px) scale(1.025);
To avoid the Z movement in the hover state, set the same Z in the base state.
-webkit-transform: perspective(400px) rotateX(0deg) rotateY(0deg)
translateZ(10px) scale(1);
It's always a good idea, when using transitions, to set the base transform in the same way that the transformed state. That's why I set the 0deg rotations.
fiddle
I used this code below
<style>
.outer div {
float: left;
-webkit-perspective: 200px;
-webkit-transform-style: preserve-3d;
}
.outer a {
-webkit-transition: all 1.0s ease-in-out;
background:#0F6;
width:100px;
height:100px;
display:block;
-webkit-transform: rotateY(45deg);
}
.outer div:hover a {
-webkit-transform: none;
}
</style>
<div class="outer">
<div>
</div>
</div>
This solution works for me in chrome. http://jsfiddle.net/jaxweb/7qtLD/7/
I have designed a little infinite carousel that uses a placeholder div element (that shrinks and expands), followed by a few images that scroll to one side on a button click, after which the element that moves off screen moves to the back of the queue again. Inside a container div element.
It works perfectly on Chrome and Firefox but the transition is very slow/jaggy on Safari 7.0 on Mavericks OS X. I've tried a few documented hacks to fix it but can't see any improvement.
I would like to know is someone can have a look at the css below and tell me if the hacks are placed on the right elements please?
#ContentGallery {
background-color: black;
z-index:1;
height: 600px;
position: absolute;
width: 2600px;
top: 0;
left: 0;
overflow: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-perspective: 1000;
}
.flipPagePhoto {
display: inline-block;
-webkit-transition: margin-left 0.75s ease-out;
-moz-transition: margin-left 0.75s ease-out;
-o-transition: margin-left 0.75s ease-out;
transition: margin-left 0.75s ease-out;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.flipPagePlacehold {
float: left;
margin-left: -100px;
width:300px;
height: 600px;
-webkit-transition: margin-left 0.86s ease-out;
-moz-transition: margin-left 0.86s ease-out;
-o-transition: margin-left 0.86s ease-out;
transition: margin-left 0.86s ease-out;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
<div id="ContentGallery">
<div class="flipPagePlacehold static"></div>
<img class="flipPagePhoto">
<!-- More images follow -->
</div>
I have the same issues with Safari 7 in many many places on my website mainly based on css transitions. Safari 7 is a step backwards for what regards smoothness of css transitions. I googled a lot but it seems still a matter of rare interest. Hopefully this will change and lead to better Safari 7 versions in the coming updates. There are also color difference issues…
So I don’t think it has to do with your code at all! Hope this helps a little.
Not really the z-index, but I found that best to describe the issue in a short title...
See this simplified example:
http://jsfiddle.net/sCnDx/
If you hover over the images, you will note that some of the corners are below other images.
If you remove the code pertaining to the rotation, all is working fine.. So the problem is that rotation or how it interacts with the scaling.
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
Is there anything that can be done about this or is this a browser bug?
(Tested in safari)
Thanks,
Wesley
#wesley giv e position:relative to your images like this :
img {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-transition: -webkit-transform .15s linear;
-moz-transition: -moz-transform .15s linear;
-o-transition: -o-transform .15s linear;
transition: transform .15s linear;
position:relative;
}
a img:hover {
-webkit-transform: scale(1.25) !important;
-moz-transform: scale(1.25) !important;
-o-transform: scale(1.25) !important;
transform: scale(1.25) !important;
position: relative;
z-index: 2;
}
because z-index only work on position relative, absolute & fixed.
check this fiddle http://jsfiddle.net/sandeep/sCnDx/3/
Z-index works for me.
http://jsfiddle.net/GY4Jp/
add to img
position: relative;
z-index: 1;
add to img:hover
position: relative;
z-index: 2;