So I have a div of .scrollable-sections with the below styles on it, but when it comes to translating this div in IE 11 (which is done by adding a class to the parent of the .scrollable-sections) for some reason it flashes white when it has to translate and it's not a smooth transition.
I have trawled through other answers which is why I'm trying to force a 3d translate and adding backface-visibilty.
I'm all out of options as what else I can try to stop this glitching in ie11.
Can anyone help?
.scrollable-sections {
position: relative;
left: 0;
bottom: 0;
right: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 500ms ease-in-out;
transition: -webkit-transform 500ms ease-in-out;
-moz-transition: transform 500ms ease-in-out,
-moz-transform 500ms ease-in-out;
transition: transform 500ms ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0%, 0);
-moz-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
will-change: "transform transition";
}
.viewport.js-translateX1 .scrollable-sections{
transform: translate3d(0, -100%, 0);
}
I hope below css help you. I have updated some css code in your css.
.scrollable-sections {
position:absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 500ms ease-in-out;
transition: -webkit-transform 500ms ease-in-out;
-moz-transition: transform 500ms ease-in-out,
-moz-transform 500ms ease-in-out;
transition: transform 500ms ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
will-change: "transform transition";
}
.viewport.js-translateX1 .scrollable-sections{
transform: translate3d(0, 0, 0);
}
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);
}
I have the following CSS:
.popup {
background-color: white;
border-style: solid;
z-index: 1001;
box-shadow: 15px 15px 10px rgba(0,0,0,.3);
border-radius: 3px;
position: absolute;
-webkit-transition: -webkit-transform 1s ease;
-moz-transition: -moz-transform 1s ease;
-o-transition: -o-transform 1s ease;
-ms-transition: -ms-transform 1s ease;
transition: transform 1s ease;
}
.centered {
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hidden {
top:100%;
visibility: hidden;
}
.visible {
top: 50%;
}
What I'm trying to do is to perform an animation bottom->top when a popup get's visible and top->bottom when it get's hidden.
Before, I was using transition: all 1s ease; and it was working, but it was laggy so I decided to use transition: transform 1s ease;. Doing this the transition is not working anymore even if I think the code should be fine. Does anyone know why and how to fix it?
Thank you.
EDIT
Here a working CodePen example:
http://codepen.io/andipavllo/pen/QyeJjq
And here is a not working example:
http://codepen.io/andipavllo/pen/KVOrgQ
They are exactly the same, except for transition: transform 1s ease; instead of `transition: all 1s ease;
In the working example you're transitioning all the properties and not only the transform property: this is important because also the top property is involved in the effect, changing from 100% to 50% (when you remove the class hidden and add the class visible).
As you can verify, if you change
transition: transform 1s ease;
into
transition: transform 1s ease, top 1s ease;
the transition works as expected.
Previously when you had transition: all 1s ease, in that translate and top values were getting animated.
But once you changed it to transition: transform 1s ease top property was left out.
.popup {
background-color: white;
border-style: solid;
z-index: 1001;
box-shadow: 15px 15px 10px rgba(0, 0, 0, .3);
border-radius: 3px;
position: absolute;
-webkit-transition: -webkit-transform 1s ease;
-moz-transition: -moz-transform 1s ease;
-o-transition: -o-transform 1s ease;
/* edited the line below by adding top also*/
transition: transform 1s ease, top 1s ease;
}
.centered {
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hidden {
top: 100%;
visibility: hidden;
}
.visible {
top: 50%;
}
Check this pen.
CSS: Modify your css to the following
.popup {
...
transition: transform 1s ease, top 1s ease;
}
And also do not use a vendor prefix if it is not necessary.
For transition only -webkit is needed. and for transform -ms and -webkit will do the job.
I have a diamond shaped div that spins 360 degrees around its own axis on hover by using CSS animation.
I can't work it out how to ensure smooth going back to the original state when not hovering anymore?
So far it "jumps" when the diamond is in the middle of its turn. I would like it to be smooth. Is it possible to do it with CSS animations? If not, maybe with JS?
.dn-diamond {
display: inline-block;
width: 100px;
height: 100px;
background: #000;
transform: rotate(-45deg);
margin: 50px;
overflow: hidden;
}
.dn-diamond:hover {
animation: spin 3s infinite linear;
}
#keyframes spin {
from { transform: rotateY(0deg) rotate(-45deg); }
to { transform: rotateY(360deg) rotate(-45deg); }
}
<div class="dn-diamond">
Here is JSFiddle
I was trying to use the transition but could not keep the original transformed shape of it (it went back to being a square, not a diamond).
You should use transitions for this. They will allow you to keep the transition smooth when the mouse moves out of the element.
Example :
.dn-diamond {
display: inline-block;
width: 100px;
height: 100px;
background: #000;
transform: rotateY(0deg) rotateZ(-45deg);
transition: transform 3s linear;
margin: 50px;
overflow: hidden;
}
.dn-diamond:hover {
transform: rotateY(360deg) rotateZ(-45deg);
}
<div class="dn-diamond">
You can also control the speed of the transition when the cursor moves out of the element by setting the transition property on normal and hover state.
Example :
.dn-diamond {
display: inline-block;
width: 100px;
height: 100px;
background: #000;
transform: rotateY(0deg) rotateZ(-45deg);
transition: transform 0.5s linear;
margin: 50px;
overflow: hidden;
}
.dn-diamond:hover {
transform: rotateY(360deg) rotateZ(-45deg);
transition: transform 3s linear;
}
<div class="dn-diamond">
Note that in the above demos the vendor prefixes aren't included. check canIuse to know which vendor prefixes you need according to the browsers you want to support.
Give transitions for transform:
-webkit-transition: -webkit-transform 3s ease-in;
-moz-transition: -moz-transform 3s ease-in;
-o-transition: -o-transform 3s ease-in;
transition: transform 3s ease-in;
Snippet:
.dn-diamond {
display: inline-block;
width: 100px;
height: 100px;
background: #000;
transform: rotateY(0deg) rotateZ(-45deg);
transition: transform 0.5s linear;
margin: 50px;
overflow: hidden;
}
.dn-diamond:hover {
transform: rotateY(360deg) rotateZ(-45deg);
-webkit-transition: -webkit-transform 3s ease-in;
-moz-transition: -moz-transform 3s ease-in;
-o-transition: -o-transform 3s ease-in;
transition: transform 3s ease-in;
}
<div class="dn-diamond">
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);
}