Let me explain the situation.
I've a div that contains 5 images. each image is positioned absolute in the div in 5 'slots'.
My javascript scroll this images by changing class 'slot-0' ... 'slot-4', each class contains top/left positioning for elements.
And each image is set to have CSS transition 1s and Blur filter, except the central image that does not blur.
As long the movement ocours, in some browsers a unexpected effect occours: a 'inner shadow' like effect occours in transparent PNG borders.
HTML:
<div id="showcase-container" class="">
<img src="0.png" class="slot-0">
<img src="1.png" class="slot-1">
<img src="2.png" class="slot-2">
<img src="3.png" class="slot-3">
<img src="4.png" class="slot-4">
</div>
LESS:
// Mixins
.blur (#radius: 3px) {
filter: blur(#radius);
-webkit-filter: blur(#radius);
-moz-filter: blur(#radius);
-o-filter: blur(#radius);
-ms-filter: blur(#radius);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='#radius');
}
#showcase-container {
position: relative;
overflow-x: hidden;
width: 500px;
height: 500px;
.item {
position: absolute;
height: auto;
cursor: pointer;
&.slot-0 {
width: 30%;
top: 29%;
left: -40%;
.blur()
}
&.slot-1 {
width: 25%;
top: 27%;
left: -10%;
.blur();
}
&.slot-2 {
width: 20%;
top: 21%;
left: 40%;
}
&.slot-3 {
width: 13%;
top: 23%;
left: 80%;
.blur(3px);
}
&.slot-4 {
width: 7%;
top: 18%;
left: 120%;
.blur();
}
&.animate {
-webkit-backface-visibility: hidden;
-webkit-transform: scale(1);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
}
}
When I 'move' the image elements by changing it slot class for the next one
(slot-0 to slot-1, slot1 to slot2, ...), the problem occours.
And this unexpected result just occours in images while it have blur filter.
I've removed this error in some MAC safari using
-webkit-backface-visibility: hidden;
-webkit-transform: scale(1);
But not in some windows machines. (My development machine does not have erros, but my personal pc and my client pc does.)
Any help about this?
Related
I am trying to animate image by filter: invert(1) going from right side to the left side.
filter: invert(1);
transform-origin: right;
Seems to not be working. Is there any easy way to do it?
That's because you aren't changing the image with a transform, you're changing it with a filter. The transform-origin property will not affect a filter in any way, only transforms. If I were you I would try something like my example below. Hover the image to see the effect.
.image-container {
position: relative;
overflow: hidden;
}
.image-container:before {
content: '';
background: white;
position: absolute;
height: 100%;
width: 100%;
mix-blend-mode: difference;
transform: translateX(100%);
transition: 1s ease;
}
.image-container:hover:before {
transform: translateX(0);
}
<div class="image-container">
<img src="https://picsum.photos/id/10/400/300" alt="" />
</div>
content1.className = 'start';
window.getComputedStyle(document.getElementById('content1')).opacity;
content1.style.marginLeft = "0px";
content1.className = 'transition1';
.main {
width: 300px;
height: 250px;
top: 0px;
left: 0px;
overflow: hidden;
position: relative;
background-color: grey;
cursor: pointer;
}
#content1 {
background-color: red;
width: 300px;
height: 250px;
top: 0px;
left: 0px;
margin-left: -300px;
}
.start {
opacity: 0
}
.transition1 {
opacity: 1;
visibility: hidden;
/*margin-left: -300px !important;*/
-webkit-transition: margin-left 1.5s ease 1.5s, margin-left 1.5s ease 1.5s, visibility 1.5s ease 1.5s
}
<div id="main" class="main">
<div id="content1" class="content1 hidden">
</div>
</div>
I want the red div to start from outside and go into the grey div slowly then after a few seconds it would go out slowly again. I tried using transition but it seems to now work.
My guess is timing is wrong?
UPDATE
I have the above now What I lack is the timing to show the red div then go out again to left. I have set a visibility but I think there is a way to just use margins?
If you're wanting to do this without keyframes, then I have two ideas.
First idea is to add the transition css property to the actual #content1 element. Because as you're removing the .transition1 class, you're taking away the transition details.
If that doesn't work, then you might need to break this into 4 different "states".
That is:
Start State: Red div starts unseen
Start-to-End Transition State: .transition1 class gets added
End State: A class is added to ensure that the red div has the same margin from the .transition1 even after the .transition1 class gets taken away.
End-to-State Transition State: Essentially do the opposite of what you did in the .transition1 class.
EDIT:
Maybe ignore the "4 steps" because I likely was overthinking what you were asking.
I'm not 100% sure why you wouldn't want a keyframe, but I've added a few options you can reference depending on your overall use case. Each of these rely on some sort of trigger or event. In my case, a click. But this can be determined by any sort of event.
var main2 = document.getElementById('main2');
var content2 = document.getElementById('content2');
main2.addEventListener('click', function() {
content2.classList.toggle('active');
});
var main4 = document.getElementById('main4');
var content4 = document.getElementById('content4');
main4.addEventListener('click', function() {
content4.classList.add('animate');
setTimeout(function() {
content4.classList.remove('animate');
}, 1500)
});
.main {
width: 300px;
height: 250px;
position: relative;
background-color: grey;
cursor: pointer;
overflow: hidden;
}
#content1 {
position: absolute;
background-color: red;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
transform: translate(-100%, 0);
-webkit-transition: transform 1.5s ease;
}
.main:hover #content1 {
transform: translate(0, 0);
}
/* Toggle Option */
#content2 {
position: absolute;
background-color: red;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
transform: translate(-100%, 0);
-webkit-transition: transform 1.5s ease;
}
#content2.active {
transform: translate(0, 0);
}
/* SetTimeout Option */
#content4 {
position: absolute;
background-color: red;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
transform: translate(-100%, 0);
-webkit-transition: transform 1.5s ease;
}
#content4.animate {
transform: translate(0, 0);
}
<h2>Hover Option</h2>
<p>Animation happens on hover and disappears after hover</p>
<div class="main">
<div id="content1">
</div>
</div>
<h2>Toggle Option</h2>
<p>Animation happens on click and disappears on second click</p>
<div id="main2" class="main">
<div id="content2">
</div>
</div>
<h2>SetTimeout Option</h2>
<p>Animation happens on click and disappears after 1 second</p>
<div id="main4" class="main">
<div id="content4">
</div>
</div>
I made a CSS3 animation, it works well in Firefox and Chrome, but it behaves differently in IE11 and Edge.
I couldn't fix the issue because it's hard to debug CSS3 Animation using IE Developer Tools. This issue also occurs on Edge (But i think my Edge version is outdated so please try to reproduce this issue only in IE11. The fix will probably work on both).
Here is how i want the animation to look (Works on Chrome/Firefox):
Here is how it animates differently on IE11:
Code:
HTML:
<div class="block"></div>
<span>click</span>
CSS:
span {
width: 50px;
height: 50px;
background: red;
font-size: 50px;
}
.block {
position: fixed;
height: 0%;
bottom: 0;
width: 100%;
top: auto;
display: block;
background-color: #0B0B0B;
z-index: 99999;
animation-fill-mode: both;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
.animate-up {
animation-name: overlayEffectUp;
}
#keyframes overlayEffectUp {
0% {
bottom: 0;
top: auto;
height: 0%;
}
35%,
65% {
height: 100%;
}
100% {
bottom: auto;
top: 0;
height: 0%;
}
}
JavaScript (With jQuery):
$('span').on('click', function() {
$('.block').addClass('animate-up')
})
Here is the Demo link: https://jsfiddle.net/zoq9h7xp/3/
Please, any help would be appreciated!
Edge seems to be buggy with position: fixed. Supposedly the switch between top: 0 and top: auto (and same story with the bottom property) causes this behaviour.
If you must maintain the fixed position, you can try to animate with the transform property. Change your rulesets as follow:
#keyframes overlayEffectUp {
0% {
transform: translateY(100%); // totally offscreen
}
35%,
65% {
transform: translateY(0%); // totally on screen from bottom
}
100% {
transform: translateY(-100%); // totally off screen again to top
}
}
.block {
position: fixed;
top:0;
bottom:0;
transform: translateY(100%);
width: 100%;
background-color: #0B0B0B;
z-index: 99999;
animation-fill-mode: both;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
Hope this helps.
Cheers, Jeroen
SOLUTION:
The solution I found is using two divs on top of each other(to make the function clearer I made one of the divs red), while it has to animate two divs for the effect, it should still be cleaner and faster than using javascript:
.outerDiv {
width: 100%;
height: 50px;
position: relative;
}
.hover1 {
height: 50px;
width: 50px;
background: black;
position: relative;
top: 0px;
transition: width 1s
}
.hover2 {
height: 50px;
width: 50px;
background: red;
position: relative;
top: -50px;
transition: width 1s 1s
}
.outerDiv:hover .hover2 {
width: 100%;
transition: width 0s 0.9s;
}
.outerDiv:hover .hover1 {
width: 100%;
transition: width 1s;
}
<div class="outerDiv">
<div class="hover1"></div>
<div class="hover2"></div>
</div>
This can be achieved by specifying different transition time for the normal state and hover state.
<style>
#hoverDiv {
height: 50px;
width: 50px;
background: black;
transition: width 5s; /*Specify required time.
This affects how long it takes to transition
back to the normal state*/
}
#hoverDiv:hover {
width: 100%;
transition: width 2s; /*This affects how long it takes to transition
into the hover state*/
}
</style>
<div id="hoverDiv"></div>
Also, if you want to add a delay before width decreases back to normal, try
#hoverDiv {
height: 50px;
width: 50px;
background: black;
transition: width 5s;
transition-delay: 5s; /*Waits for 5 seconds and then decreases
back to normal size in 5 seconds*/
}
I have a web page containing 3 images. When I hover over my mouse on any of the image, its width and height increase and z-index changes(it comes on top of other images). The problem is that as soon as I move my mouse out of the image div, its z-index changes immediately i.e the other two images gets on top. I want the image to be on top both when it is increasing in size and when it is decreasing in size.
Here is my CSS:
div {
position: fixed;
width: 100px;
height: 100px;
transition: width 2s, height 2s;
}
div.image1 {
top: 10px;
transition-timing-function: linear;
content:url("http://freedwallpaper.com/wp-content/uploads/2014/03/4-Nature+Wallpapers+2014-1.jpg");
}
div.image2 {
top: 120px;
transition-timing-function: linear;
content:url("http://stylonica.com/wp-content/uploads/2014/02/nature.jpg");
}
div.image3 {
top: 230px;
transition-timing-function: linear;
content:url("http://feelgrafix.com/data_images/out/2/748315-beautiful-nature-wallpaper.jpg");
}
div:hover {
z-index: 1;
width: 800px;
height: 800px;
}
Something like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<style>
div {
position: fixed;
width: 100px;
height: 100px;
transition: z-index 2s, width 2s, height 2s;
}
.image1, .image2, .image3{
z-index: 1;
}
div.image1 {
top: 10px;
transition-timing-function: linear;
content:url("http://freedwallpaper.com/wp-content/uploads/2014/03/4-Nature+Wallpapers+2014-1.jpg");
}
div.image2 {
top: 120px;
transition-timing-function: linear;
content:url("http://stylonica.com/wp-content/uploads/2014/02/nature.jpg");
}
div.image3 {
top: 230px;
transition-timing-function: linear;
content:url("http://feelgrafix.com/data_images/out/2/748315-beautiful-nature-wallpaper.jpg");
}
div:hover {
z-index: 10;
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</body>
</html>
1) Add the transition: all 2s rule to the div:hover class as well.
2) You haven't explicitly stated z-index=0 in the div class.
3) Plus, you've missed out animating your z-index in the div class as well, which is why I prefer the transition: all 2s;style.