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;
}
Related
How did they make the background color on hover look like that and not look like a box on the "about" and "case study" areas? http://clorova.com/
They used an image:
http://clorova.com/assets/img/general/hover.png
If you just inspect the page you will see the css:
.flare-hover:before {
content: '';
position: absolute;
width: 450px;
height: 450px;
background-image: url(../img/general/hover.png);
background-size: cover;
top: -200px;
left: -100px;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
-ms-transform: scale(0.4);
-o-transform: scale(0.4);
transform: scale(0.4);
}
They use image on ::before
.flare-hover:before {
content: '';
position: absolute;
width: 450px;
height: 450px;
background-image: url(../img/general/hover.png);
background-size: cover;
top: -200px;
left: -100px;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
-ms-transform: scale(0.4);
-o-transform: scale(0.4);
transform: scale(0.4);
}
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%;
}
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>
The following CSS works fine, however I am trying to add 1 or 2 seconds delay to the flip back effect. When you hover it the '.back' is visible and then when you leave the area the '.front'. I would like to add a delay so that when you leave the area it takes one or two seconds before it goes back to '.front' Is that possible?
.panel {
width: 250px!important;
height: 250px;
margin: auto!important;
position: relative;
-webkit-perspective:1000px;
}
.card {
width: 100%!important;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
}
.back {
background-color:#fff;
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
transition-delay: 2s;
}
.back p{
margin-top: 90px;
font-size: 20px;
text-align:center;
}
.panel:hover .front {
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transition:-webkit-transform 1s;
transition:transform 1s;
}
.panel:hover .back {
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition:-webkit-transform 1s;
transition:transform 1s;
transition-delay: 2s;
}
HTML
<li class="panel"><img class="front card" src="{{image}}" /><div class="back card"><p>{{model.user.full_name}}</p></div></li>
Add the transition-delay to .card - fiddle
.card {
-o-transition: all .5s 2s;
-ms-transition: all .5s 2s;
-moz-transition: all .5s 2s;
-webkit-transition: all .5s 2s;
transition: all .5s 2s;
}
.panel .front {
transition: all 2s;
}
You have to put the effect on the element in order to have it transition back without hovering on it.
Here is the problem with the code bellow. I want to create zoom-like effect with css. I am adding the classes zoomIn or zoomOut with jquery on certain events, which is not important right now.
The problem is that in Chrome and Safari (webkit based) the zoom in and out start from 0. In firefox for instance the transition starts from the current image height and extends to 1160px in this case. The webkit browsers however seem to handle things different and start the transition from 0 to 1160px
I ain't got no clever way to solve this so please help
Cheers
The images have also a class of 'full'
.full {display:block;position:absolute;width:100%;top:0;left:0;}
.zoomIn{
top:0;left:0;
box-sizing: border-box;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
height: 1160px !important;
left: 50%;
margin-left: -960px !important;
margin-top: -670px !important;
top: 50%;
width: 1920px;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-ms-transform: scale(1.2);
}
.zoomOut {
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-moz-transform: scale(1);
margin-left: 0 ;margin-top: 0;
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-ms-transform: scale(1);
}