when I mouse over repeatedly across two images, the scale animation sometimes snapback. However, scale animation works fine on Firefox.
what have I done wrong?
ul li .image{
display:inline-block;
-webkit-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
transition: .2s ease-in-out;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
ul li:hover .image{
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
here is the example on jsfiddle
I just added width:100.1% and height:100.% for :hover then it work perfectly on Chrome again.
It should be some kind of css hack but it work for me anyway, here is the update code
ul li .image{
display:inline-block;
width:100%;
height:100%;
-webkit-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
transition: .2s ease-in-out;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
ul li:hover .image{
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
width:100.1%;
height:100.1%;
}
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
Whenever I seem to apply some code to let's say move a div for example using the latest iOS Safari browser it doesn't actually transition between the two rules set. I have tried changing to use other than percentage values but still to this day, I have never been able to get it to work when I use transition: transform; for any translate property applied.
I'm using the correct prefixes and checked support and should be working no problem.
http://caniuse.com/#search=transition
http://caniuse.com/#search=translate
JSFiddle
$('button').on('click', function() {
$('.mydiv').toggleClass('added-class');
});
.mydiv {
display: inline-block;
width: 100px;
height: 50px;
background-color: red;
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
-moz-transition: transform 0.6s ease-out;
-o-transition: transform 0.6s ease-out;
-webkit-transition: transform 0.6s ease-out;
transition: transform 0.6s ease-out;
}
.added-class {
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv"></div>
<button type="button">Toggle class</button>
Old versions of iOS Safari support only vendor-prefixed properties and values for transition and transform, so you should use -webkit-transition: -webkit-transform instead -webkit-transition: transform:
JSFiddle
$('button').on('click', function() {
$('.mydiv').toggleClass('added-class');
});
.mydiv {
display: inline-block;
width: 100px;
height: 50px;
background-color: red;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.6s ease-out;
-moz-transition: transform 0.6s ease-out;
-o-transition: transform 0.6s ease-out;
transition: transform 0.6s ease-out;
}
.added-class {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv"></div>
<button type="button">Toggle class</button>
I have transition in css for dropdown menu, on hover scaleY(0) to scaleY(1). Menu drop down smoothly. My question is how to reverse this effect, when currsor is no longer hovering parent (and child) menu needs to hide self with animatioin, not just disappear. Here is css:
nav ul ul {
visibility: hidden;
width: 116px;
height: 126px;
position: absolute;
top: 63px;
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
-o-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
-webkit-transition: -webkit-transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
transition: transform 0.5s ease;
}
ul li:hover > .menu_sub {
visibility: visible;
-webkit-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
Thanks in advance.
just add transition is normal and hovered state it will return on original place
nav ul ul {
visibility: hidden;
width: 116px;
height: 126px;
position: absolute;
top: 63px;
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
-o-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
-webkit-transition: -webkit-transform 1s ease;
-ms-transition: -ms-transform 1s ease;
-o-transition: -o-transform 1s ease;
transition: transform 1s ease;
}
ul li:hover > .menu_sub {
visibility: visible;
-webkit-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: -webkit-transform 1s ease;
-ms-transition: -ms-transform 1s ease;
-o-transition: -o-transform 1s ease;
transition: transform 1s ease;
}
I have rounded submit btn, that I want to scale to 80% from the start and when I hover it I want it to scale to 100% and also rotate 360 degrees. Here's the code, I haven't have any luck finding any answers on the web.
header #searchbtn{
background: url(../img/roundedsearchbtn.png) no-repeat;
border: 0;
cursor: pointer;
display: inline-block;
float: right;
height: 41px;
filter: alpha(opacity=60);
opacity: 0.60;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
overflow: hidden;
text-indent: 100%;
width: 41px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
-transform: scale(0.8);
}
header #searchbtn:hover, header #searchbtn:focus {
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-ms-transform: rotate(360deg) scale(1);
-o-transform: rotate(360deg) scale(1);
-transform: rotate(360deg) scale(1);
}
This is what you want? Fiddle
Just add these CSS rules:
button {
-webkit-transform: rotate(0) scale(.8,.8);
-moz-transform: rotate(0) scale(.8,.8);
transform: rotate(0) scale(.8,.8);
}
button:hover {
-webkit-transform: rotate(360deg) scale(1,1);
-moz-transform: rotate(360deg) scale(1,1);
transform: rotate(360deg) scale(1,1);
}
CSS looks as follows:
.rotate
{
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
}
.rotate:hover
{
-webkit-transform: rotate(90deg) scale(1);
-moz-transform: rotate(90deg) scale(1);
-o-transform: rotate(90deg) scale(1);
-ms-transform: rotate(90deg) scale(1);
}
Hovering over a <span class="rotate"> will rotate the element in Firefox but not chrome.
Demo: http://jsfiddle.net/BuHGQ/ (hover over the arrow)
What can be done so that it works in Chrome?
Try this:
.rotate { display: inline-block; }
http://jsfiddle.net/y7nfD/1/