用于调整视频大小的动画悬停和关键帧不起作用并给我一个单独的关键帧？

如何解决用于调整视频大小的动画悬停和关键帧不起作用并给我一个单独的关键帧？

我需要知道为什么在我设置关键帧时我的视频没有调整大小，以及为什么它给了我一个单独的关键帧彩色框。在我的回答中，我已经将视频放在 div 标签中，但现在如何通过关键帧调整视频大小？现在有人可以帮我吗？

<!DOCTYPE html>
<html>
<head>  
<title>Home</title>  
<Meta name="viewport" content="width=device-width,initial-scale=1">  
<style>
div {width: 100px;      
     height: 100px;      
     background-color: rgb(109,53,149);      
     position: relative;      
     animation-name: resize;      
     animation-iteration-count: infinite;      
     animation-play-state: paused;           
     animation-duration: 3s;         
     animation-direction: alternate;    
}        
 
div:hover {    
     animation-play-state: running;      
     animation-iteration-count: infinite;    
}    
  
@keyframes resize  {0%   {width: 260px; height: 260px; left:0px; top:0px;}      
                   25%  {width: 220px; height: 220px; left:100px; top:100px;}      
                   50%  {width: 180px; height: 180px; left:180px; top:180px;}      
                   75%  {width: 120px; height: 120px; left:270px; top:270px;}      
                   100% {width: 50px; height: 50px; left:350px; top:350px;}    
}
</style>  
</head>
<body>            
<div>     
  <video src="a1.mp4" controls autoplay width="300" height="300" loop muted playsinline>      
 Your browser does not support the video tag.    
</video>
</div>          
</body>
</html>

解决方法

您的视频似乎不在您将 @keyframe 动画归因于的 div 内，复制视频元素，然后将其粘贴到您的 div 中，这样就可以了