I have a bug in Microsoft Edge. <div> during hover has transform: scale(1.5); with transition: transform 1s;. But when you move cursor to div, wait 1s, move out and then fast move to div, div's scale is broken and transition disappear. Is there any way to fix this behavior? Here is fiddle.
div {
background-color: green;
transition: transform 1s;
height: 100px;
width: 100px;
}
div:hover {
transform: scale(1.5);
}
<div></div>
To fix this transition problem on Edge use the transition-timing-function property, this will fix the problem by affecting the speeding making it slower on the start and the end. You can then set the animation length (in seconds) to make it to the original speed with transition-duration
div {
background-color: green;
transition: transform 1s;
height: 100px;
width: 100px;
}
div:hover {
transform: scale(1.5);
transition-timing-function: ease-in-out;
}
<div></div>
EDIT: If you notice carefully there's some kind of a glitch with the width changing on hover, but overall the transition is smooth on Edge
Related
https://codepen.io/DubCoder/pen/KKwEydp?editors=1100
So this is the exact image I want, and the exact zoom in/out effect that I want, but because it's on a background image, it seems like I'm not able to move the div around as I normally would.
I've tried wrapping it in a container and moving it around and using margins/padding, but it doesn't work. It either crops off the image or it just doesn't budge.
I want that image to be in the middle of my page, with more content above and below it.
I've tried just putting copying all the code related to animations/transitions and putting it on an image, like so, but then it doesn't work.
.myimage {
animation: zoomin 10s ease-in infinite;
transition: all .5s ease-in-out;
overflow: hidden;
animation: zoomout 10s ease-in infinite;
transition: all .5s ease-in-out;
overflow: hidden;
}
It starts to change the dimensions of the actual container itself. I need the container to stay the same, whilst zooming in/out of the cabin in the picture.
I'm still pretty new when it comes to animations so if anyone could help, that would be great!
You can create a main container with overflow: hidden;, and inside place your animation like in below example. You can try the following, Run code snippet and move the mouse over the Example word :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
#main-container
{
overflow: hidden;
border: 1px solid grey;
width: 500px;
position: relative;
margin: auto;
}
#container
{
transform: scale(1.0);
transform-origin: 50% 50%;
transition: all 0.5s ease-in-out;
position: relative;
display: flex;
justify-content: center;
align-items: center;
/* Insert your background image here */
/* background-image: url(''); */
}
#container:hover
{
transform: scale(3.0);
}
</style>
</head>
<body>
<div id="main-container" >
<div id="container" >
<h1>Example</h1>
</div>
</div>
</body>
</html>
I have a container that contains a div inside it. By clicking on that div square, it begins moving and ends up being outside the container.
My problem is that this inner block is being trimmed out really harsh while going beyond the borderline. How could this transition be done more smoothly using CSS means? I want to get an effect when this square disappearing becomes gentle for the eyes.
Maybe I'm supposed to use some kind of an image mask for the main container or a fade effect for the square. I'm not exactly sure how to achieve that behaviour.
Thank you in advance!
Codepan sandbox
.borderline {
position: relative;
text-align: center;
vertical-align: middle;
line-height: 150px;
width: 400px;
height: 150px;
overflow: hidden;
}
.square {
position: absolute;
width: 150px;
height: 150px;
background-color: #0087ff;
}
.square:focus {
transform: translateX(500px);
transition: all 2s;
}
<div class='borderline'>
<div class='square' tabindex="1">Click me</div>
</div>
maybe you could add an animation to your css with opacity like:
.square:focus {
transform: translateX(500px);
transition: all 2s;
animation-name: example;
animation-duration: 1s;
}
#keyframes example {
0% {opacity:1}
50% {opacity:1}
100% {opacity:0}
}
https://codepen.io/anon/pen/rzppON
If an image in an element with a decimal width is animated using css (opacity), the image loads at a fixed pixel width then after completing the transition changes size to the correct decimal pixels.
I have tested this on Chrome only. See the fiddle, which shows the problem only when using css animations. http://jsfiddle.net/minlare/kext0af4/
.opacity{
width: 400px;
}
.opacity div {
width: calc(100% / 3);
float: left;
}
.opacity img{
max-width: 100%;
display: block;
opacity: 1;
transition: .25s;
}
.opacity img.visible{
opacity: 0;
}
Any way around this?
I solved adding outline: 1px transparent solid;
.opacity img{
max-width: 100%;
display: block;
opacity: 1;
transition: .25s;
outline: 1px transparent solid;
}
Fork: http://jsfiddle.net/0dvvd1n1/
Also backface-visibility: hidden; solves the issue but the outline approach doesn't create sharpened edges.
Another method to sort of solve it is to add translate:transformZ(0) This forces GPU rendering, which corrects the jumping in the version I tested it in (Chrome 43.0.2357.132 on Mac). However, it can cause issues if there are a large number of GPU rendered elements that have transitions.
http://jsfiddle.net/kudj7zxn/
.opacity img{
max-width: 100%;
display: block;
opacity: 1;
transition: .25s;
transform: translateZ(0);
}
After spending much time coding a website, my whole plan seems to have just shattered. I came across that I was unable to position any elements with 'fixed' - they just wouldn't work. After some research, I figured it was to do with the fact that the element's parent contains several transformations and this means that you are unable to have a fixed element as it is not now fixed to the viewport, but to the parent's transformations.
I NEED to be able to use fixed positioning, but my whole HTML code is inside this div with the transformations - and I can't change that as it's a fundamental part of the design.
Im not to sure if there is any fix for this, or some way to get around the problem possibly with jQuery or something. Please help me out! If it's required I can provide some code.
Thank you!
http://wtfhtmlcss.com/#position-transforms
Here is some CSS:
.container {
background: #fff;
min-height: 100%;
position: relative;
outline: 1px solid rgba(0,0,0,0);
z-index: 10;
-webkit-transform: translateZ(0) translateX(0) rotateY(0deg); reset transforms (Chrome bug)
transform: translateZ(0) translateX(0) rotateY(0deg);
}
.container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0px;
opacity: 0;
background: rgba(0,0,0,0.2);
/* the transition delay of the height needs to be synced with the container transition time */
-webkit-transition: opacity 0.4s, height 0s 0.4s;
transition: opacity 0.4s, height 0s 0.4s;
}
.animate .container::after {
opacity: 1;
height: 101%;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
/* Effect Move Left */
.effect-moveleft {
background-color: rgb(50,50,130);
}
.effect-moveleft .container {
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.effect-moveleft .container::after {
background: rgba(255,255,255,0.6);
}
.effect-moveleft.animate .container {
-webkit-transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
}
.no-csstransforms3d .effect-moveleft.animate .container {
left: -75%;
}
The container obviously contains the whole body code.
Then there is the DIV which I have set to fixed positioning and which won't fix.
The CSS Transforms Module Level 1 says
For elements whose layout is governed by the CSS box model, any value
other than none for the transform results in the creation of
both a stacking context and a containing block. The object acts as a
containing block for fixed positioned descendants.
However, it seems there isn't consensus:
ISSUE 1: Is this effect on position: fixed necessary? If so,
need to go into more detail here about why fixed positioned objects
should do this, i.e., that it’s much harder to implement otherwise.
See Bug 16328.
So you can wait and maybe the spec will be changed.
But a better approach would be moving your fixed element outside the transormed element.
I made a css3 cube, and I'm trying to make one side of the cube to open, in the same way a door or a window would open. So I used the transformY and sat transform origin to right along with a 2s transition. Ultimately it reaches the point I expected it to. but during the transition there's a slight turn to the left before it start moving to the right. I want to stop that.
This is my code simplified as much as possible
<div class="parent">
<div></div>
</div>
css
.parent {
perspective: 1000px;
}
.parent div {
background: #ff6b6b;
width: 300px;
height: 300px;
margin: 30px;
}
.parent div:hover {
transform: rotateY(180deg);
transform-origin: right center;
transition: all 2s;
}
I need this div to rotate in a horizontal path, with the right side being the transform origin and not changing place. But it slightly does, to the left. How do I fix that? Sorry if this isn't very clear.
You have set transform-origin in the hover state.
But not in the base state.
That means that in your transition you are not only rotating, but also changing the rotation point.
It should be
.parent div {
background: #ff6b6b;
width: 300px;
height: 300px;
margin: 0px;
-webkit-transform-origin: right center;
transform-origin: right center;
}
.parent div:hover {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
transition: all 2s;
}
fiddle