时间戳

首页 > 解决方案 > CSS 动画 - 图像宽度从 0 到 100% 移动差异

html - CSS 动画 - 图像宽度从 0 到 100% 移动差异

问题描述

我尝试制作宽度为 0% 到 100% 的图像动画。

但是当我在 html 中设置图像的 css 样式时，存在运动差异。

如果图像样式在 html 中设置为“width:100%”，则动画从右上角开始移动。如果未设置图像样式，则动画从右到左移动。

我需要将图像设置为html 中的width:100%和从右到左的动画移动。

这是演示链接 codepen：演示示例

.showVideoImage{
    position: absolute;
    width: 0%;
    left: 100%;
    transition: 0.5s;
}

.showVideoImage2{
    position: absolute;
    width: 0%;
    left: 100%;
    transition: 0.5s;
}
  
div.product-box:hover .showVideoImage
{
    left: 0%;  
    width: 100%;
}

div.product-box2:hover .showVideoImage2
{
    left: 0%;  
    width: 100%;
}
<div class="product-box">
  <h2>hover me test1</h2>
  
  <div class="showVideoImage" >
    <img src="https://data.photo-ac.com/data/thumbnails/34/346a378b2e5b1bc0d8d999c811f8e6aa_w.jpeg" style="width:100%"/>
  </div>
</div>

<div class="product-box2">
  <h2>hover me test2</h2>
  
  <div class="showVideoImage2" >
    <img src="https://data.photo-ac.com/data/thumbnails/34/346a378b2e5b1bc0d8d999c811f8e6aa_w.jpeg" />
  </div>
</div>

标签： htmlcssanimation

解决方案

您需要设置img本身而不是父标签的宽度。

.showVideoImage{
    position: absolute;
    left: 100%;
    opacity:0;
    transition: 1s; 
}
  
div.product-box:hover > .showVideoImage
{
    left: 0%;
    opacity:1;
}

div.product-box:hover img
{
  width:750px;
}

img{
  width:0px;
}
<div class="product-box">
  <h2>hover me test1</h2>
  
  <div class="showVideoImage" >
    <img src="https://data.photo-ac.com/data/thumbnails/34/346a378b2e5b1bc0d8d999c811f8e6aa_w.jpeg"/>
  </div>
</div>

推荐阅读