Hello I'm trying out CSS transition property, and I'm having some trouble, when I hover the main tag, the images transitions into their respective positions which I have given, but as soon as I remove the cursor, the images disappear in an instant, without the transition property which I have set, it works just fine when I'm using only background color instead of image, I want the transition to be applied also when I remove the hover from the images,
This is the CSS code that I have written
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
width: 900px;
height: 600px;
margin: 10px auto;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.box {
width: 300px;
height: 600px;
position: absolute;
top: 0;
left: -300px;
transition: ease-out;
transition: 2s;
}
main:hover .box:nth-child(1) {
top: 0;
left: 0;
background: url('https://picsum.photos/seed/picsum/300/600');
background-size: cover;
}
main:hover .box:nth-child(2) {
top: 0;
left: 300px;
background: url('https://picsum.photos/id/237/300/600');
background-size: cover;
}
main:hover .box:nth-child(3) {
top: 0;
left: 600px;
background: url('https://picsum.photos/300/600.jpg');
background-size: cover;
}
<main>
<div >
</div>
<div >
</div>
<div >
</div>
</main>
CodePudding user response:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
width: 900px;
height: 600px;
margin: 10px auto;
border: 1px solid black;
position: relative;
overflow: hidden;
transition: ease-in-out;
transition: 2s;
}
.box {
width: 300px;
height: 600px;
position: absolute;
top: 0;
left: -300px;
transition: ease-in-out;
transition: 2s;
left: 0;
background-size: cover;
}
main:hover .box:nth-child(1) {
top: 0;
left: 0;
background: url('https://picsum.photos/seed/picsum/300/600');
background-size: cover;
}
.box:nth-child(1) {
top: 0;
left: -300px;
background: url('https://picsum.photos/seed/picsum/300/600');
background-size: cover;
}
.box:nth-child(2) {
top: 0;
left: -300px;
background: url('https://picsum.photos/id/237/300/600');
background-size: cover;
}
.box:nth-child(3) {
top: 0;
left: -300px;
background: url('https://picsum.photos/id/237/300/600');
background-size: cover;
}
main:hover .box:nth-child(2) {
top: 0;
left: 300px;
background: url('https://picsum.photos/id/237/300/600');
background-size: cover;
}
main:hover .box:nth-child(3) {
top: 0;
left: 600px;
background: url('https://picsum.photos/300/600.jpg');
background-size: cover;
}
<main>
<div >
</div>
<div >
</div>
<div >
</div>
</main>
this happens because when you're not hovering anymore the image gets removed solution keep the image even without hover... Also transition property should be ease-in-out
.
CodePudding user response:
var x = document.getElementsByClassName("box");
var animations = {
"animation": "animationiteration",
"OAnimation": "oAnimationIteration",
"MozAnimation": "animationiteration",
"WebkitAnimation": "webkitAnimationIteration"
};
for (let i = 0; i < x.length; i ) {
x[i].addEventListener("animationend", function(e) {
if (i == 0) {
x[i].style.left = "0";
}
if (i == 1) {
x[i].style.left = "300px";
}
if (i == 2) {
x[i].style.left = "600px";
}
for (let t in animations) {
if (x[i].style[t] !== undefined) {
x[i].style[t]="none";
}
}
});
x[i].addEventListener("webkitAnimationEnd", function(e) {
if (i == 0) {
x[i].style.left = "0";
}
if (i == 1) {
x[i].style.left = "300px";
}
if (i == 2) {
x[i].style.left = "600px";
}
for (let t in animations) {
if (x[i].style[t] !== undefined) {
x[i].style[t]="none";
}
}
});
}
// Code for Chrome, Safari and Opera
// Standard syntax
function myEndFunction(el,i) {
console.log("hi")
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
width: 900px;
height: 600px;
margin: 10px auto;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.box {
width: 300px;
height: 600px;
position: absolute;
left: -300px;
}
main:hover .box:nth-child(1) {
-webkit-animation: slide1 0.5s forwards;
animation: slide1 0.5s forwards;
}
main:hover .box:nth-child(2) {
-webkit-animation: slide2 0.5s forwards;
animation: slide2 0.5s forwards;
}
main:hover .box:nth-child(3) {
-webkit-animation: slide3 0.5s forwards;
animation: slide3 0.5s forwards;
}
main .box:nth-child(1) {
top: 0;
background: url('https://picsum.photos/seed/picsum/300/600');
background-size: cover;
}
main .box:nth-child(2) {
top: 0;
background: url('https://picsum.photos/id/237/300/600');
background-size: cover;
}
main .box:nth-child(3) {
top: 0;
background: url('https://picsum.photos/300/600.jpg');
background-size: cover;
}
@-webkit-keyframes slide1 {
100% {
left: 0;
}
}
@keyframes slide1 {
100% {
left: 0;
}
}
@-webkit-keyframes slide2 {
100% {
left: 300px;
}
}
@keyframes slide2 {
100% {
left: 300px;
}
}
@-webkit-keyframes slide3 {
100% {
left: 600px;
}
}
@keyframes slide3 {
100% {
left: 600px;
}
}
<main>
<div >
</div>
<div >
</div>
<div >
</div>
</main>
Great question, I managed a solution only using a bit of js!