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;
}
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'm here again with another webkit css3 animation problem. I've tried absolutely everything, even over-defining CSS properties.
The problem I'm having is the hover animations are cutting to the end when hovering in and out on webkit. It also has some strangeness when activating and deactivating where it seems to remember old values and try to animate to them.
I'm wondering whether I'm just missing something here, or Chrome is just incredibly buggy recently. Here is an example:
$(".offcanvas").click(function() {
$('body').toggleClass('uk-offcanvas-page');
});
html,
body {
padding: 0;
margin: 0;
background: #de1b4a;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Bar */
header .offcanvas .bar {
display: inline-block;
position: relative;
width: 20px;
height: 2px;
margin: 8px 0 !important;
background: #fff;
-webkit-transform: rotateZ(0deg) translateX(0px);
-moz-transform: rotateZ(0deg) translateX(0px);
-ms-transform: rotateZ(0deg) translateX(0px);
-o-transform: rotateZ(0deg) translateX(0px);
transform: rotateZ(0deg) translateX(0px);
-webkit-transition: transform 500ms ease-in-out;
-moz-transition: transform 500ms ease-in-out;
-o-transition: transform 500ms ease-in-out;
transition: transform 500ms ease-in-out;
}
header .offcanvas .bar:before {
content: '';
display: block;
position: absolute;
top: 8px;
left: 0;
background: inherit;
width: inherit;
height: inherit;
-webkit-transform: rotateZ(0deg) translateX(0px);
-moz-transform: rotateZ(0deg) translateX(0px);
-ms-transform: rotateZ(0deg) translateX(0px);
-o-transform: rotateZ(0deg) translateX(0px);
transform: rotateZ(0deg) translateX(0px);
-webkit-transition: transform 500ms ease-in-out;
-moz-transition: transform 500ms ease-in-out;
-o-transition: transform 500ms ease-in-out;
transition: transform 500ms ease-in-out;
}
header .offcanvas .bar:after {
content: '';
display: block;
position: absolute;
bottom: 8px;
left: 0;
background: inherit;
width: inherit;
height: inherit;
-webkit-transform: rotateZ(0deg) translateX(0px);
-moz-transform: rotateZ(0deg) translateX(0px);
-ms-transform: rotateZ(0deg) translateX(0px);
-o-transform: rotateZ(0deg) translateX(0px);
transform: rotateZ(0deg) translateX(0px);
-webkit-transition: transform 500ms ease-in-out;
-moz-transition: transform 500ms ease-in-out;
-o-transition: transform 500ms ease-in-out;
transition: transform 500ms ease-in-out;
}
/* Bar Hover */
header .offcanvas:hover .bar {
-webkit-transform: rotateZ(0deg) translateX(-3px);
-moz-transform: rotateZ(0deg) translateX(-3px);
-ms-transform: rotateZ(0deg) translateX(-3px);
-o-transform: rotateZ(0deg) translateX(-3px);
transform: rotateZ(0deg) translateX(-3px);
}
header .offcanvas:hover .bar:before {
-webkit-transform: rotateZ(0deg) translateX(6px);
-moz-transform: rotateZ(0deg) translateX(6px);
-ms-transform: rotateZ(0deg) translateX(6px);
-o-transform: rotateZ(0deg) translateX(6px);
transform: rotateZ(0deg) translateX(6px);
}
header .offcanvas:hover .bar:after {
-webkit-transform: rotateZ(0deg) translateX(6px);
-moz-transform: rotateZ(0deg) translateX(6px);
-ms-transform: rotateZ(0deg) translateX(6px);
-o-transform: rotateZ(0deg) translateX(6px);
transform: rotateZ(0deg) translateX(6px);
}
/* Bar Close */
.uk-offcanvas-page header .offcanvas .bar,
.uk-offcanvas-page header.uk-active .offcanvas .bar {
background: rgba(0, 0, 0, 0);
}
.uk-offcanvas-page header .offcanvas:hover .bar {
-webkit-transform: rotateZ(0deg) translateX(0px);
-moz-transform: rotateZ(0deg) translateX(0px);
-ms-transform: rotateZ(0deg) translateX(0px);
-o-transform: rotateZ(0deg) translateX(0px);
transform: rotateZ(0deg) translateX(0px);
}
.uk-offcanvas-page header .offcanvas .bar:before {
-webkit-transform: rotateZ(45deg) translateX(-11px);
-moz-transform: rotateZ(45deg) translateX(-11px);
-ms-transform: rotateZ(45deg) translateX(-11px);
-o-transform: rotateZ(45deg) translateX(-11px);
transform: rotateZ(45deg) translateX(-11px);
background: #fff;
}
.uk-offcanvas-page header .offcanvas .bar:after {
-webkit-transform: rotateZ(-45deg) translateX(-11px);
-moz-transform: rotateZ(-45deg) translateX(-11px);
-ms-transform: rotateZ(-45deg) translateX(-11px);
-o-transform: rotateZ(-45deg) translateX(-11px);
transform: rotateZ(-45deg) translateX(-11px);
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="center">
<header>
<div class="offcanvas"><i class="bar"></i>
</div>
</header>
</div>
I've slowed down the animations so you can see it skipping, but hover in and out to see it.
I was wondering if anyone more advanced could help me on this one?
Thanks,
Tom
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 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);
}
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;