- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I have a video and I want to animate ists width only from 0 to 100%. The problem is that the height is resized proportionally.
.video-container {
height: 300px
}
video {
width: 200px;
background: red;
-webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
}
video:hover {
width: 300px;
}
<div class="video-container">
<video src="//code-love.tk/video/flamenco.mp4" loop autoplay muted></video>
</div>
What shall I do?
Why would you want the video to be not propostional?
Hovever, a transform would seem to be more what you are after
Yes, they’re doing it with transform – you can inspect the CSS in the developer console and even grab their cubic-bezier timings https://codepen.io/anon/pen/EpaQLg
Note that they’re not touching the width – the videos are just sliding in from the side.
Hi! Great answer! There are reputation points to be earned for the detailed version of this question on Stackowerflow. Please answer there too. You will earn the points and help more people. :)