I'm currently working on creating the animation depicted in the image below:
https://i.stack.imgur.com/W69EQ.jpg
My goal is to develop a video slider where, upon clicking a button, the video will seamlessly shift to the right within its parent container and then return from the left without revealing its original position. I've experimented with various methods but haven't achieved the desired result so far.
Thank you for your assistance!
<div class='contendor_portafolio' class='next'>
<video id='video' width="320" height="240" controls>
<source src="video.mp4" type="video/mp4" />
</video>
</div>
#video{
width: 98%;
height: 100%;
transition: all linear 0.5s;
background:blue;
}
.next{
display: block;
/* opacity: 1;*/
-webkit-animation: next 0.5s 1; /* Safari 4+ */
}
@-webkit-keyframes next {
25% {
-webkit-transform: translateX(2000px);
}
50% {
opacity: 0;
-webkit-transform: translateY(-2000px);
display: none;
}
80% {
-webkit-transform: translateX(-2000px)
}
100%{
}
}
.contendor_portafolio{
position: fixed;
width: 84%;
top: 10%;
height: 80%;
z-index: 91;
left: 8%;
text-align: center;
opacity:1;
background: green;
transition: all linear 0.5s;
}