Question

我试图在悬停时生成圆形图像，但无法使此代码生效。

我可以使用CSS转换来增加圆圈，但它会立即增长并且有点难看。理想情况下，我希望在悬停和鼠标移出时有2-3000毫秒的延迟，线性增长。

我知道我可以用JS / D3做到这一点但是如果可能的话需要用CSS来做。

尝试了

.wpb_single_image .vc_single_image-wrapper.vc_box_circle:hover
{

animation: mymove 3s normal;
}
@-webkit-keyframes mymove {
        0%
        {
        width:250px;}

    25%
    {
    width:260px;}

    75%
    {
    width:270px;}

    100%
    {
    width:280px;
    }
}

和

 .wpb_single_image .vc_single_image-wrapper.vc_box_circle:hover
{
animation: mymove 3s normal;
}
@-webkit-keyframes mymove {
        0%
        {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);}
         }
        25%
        {
        -webkit-transform: scale(1.033);
        -ms-transform: scale(1.033);
        transform: scale(1.033);}

        75%
        {
        -webkit-transform: scale(1.066);
        -ms-transform: scale(1.066);
        transform: scale(1.066);}

        100%
        {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
        }

但两者都没有。

有更好的方法吗？

Answer 1

I've created a pen based on your code

使用transform: scale是一种更好的方法，因为它会同时增加width和height。

你错过创建平滑动画的关键是过渡属性，这需要应用于正常状态的元素，而不是:hover状态。

我添加了这种过渡样式：

transition: 3s ease-in-out;

请注意，它与动画时间的长度相同。 ease-in-out是一个标准的缓动功能，如果您想更深入地尝试使用cubic-bezier

使用此属性可以轻松添加动画延迟：

animation-delay:2s

使关键帧动画更平滑的另一个原因是0％和100％样式相同，因此在此示例中，圆圈在达到100％时返回到原始比例，从而创建漂亮，平滑，可重复的动画。

I've also created an alternative animation看起来更平滑，只需在动画中设置0％和100％点的比例即可：

0%{transform: scale(1)}
100%{transform: scale(2)}

你可以做的另一件事是将你的动画循环设置从normal更改为infinite alternate，结帐我的第二个例子，这是使用infinite alternate，这使得圈子不会突然缩短而增长和缩小

Answer 2

您可以使用animation-delay

延迟动画的开始

如

.delay {
     animation-delay:2s
}

Reference @ MDN

演示显示以下差异

.circle {
  border-radius: 50%;
  display: block;
}
.circle:hover {
  animation: mymove 3s normal;
}
.delay:hover {
  animation-delay: 2s
}
@-webkit-keyframes mymove {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
25% {
  -webkit-transform: scale(1.033);
  -ms-transform: scale(1.033);
  transform: scale(1.033);
}
75% {
  -webkit-transform: scale(1.066);
  -ms-transform: scale(1.066);
  transform: scale(1.066);
}
100% {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
@-webkit-keyframes mymove {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.033);
    -ms-transform: scale(1.033);
    transform: scale(1.033);
  }
  75% {
    -webkit-transform: scale(1.066);
    -ms-transform: scale(1.066);
    transform: scale(1.066);
  }
  100% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}

<div>
  <img src="http://lorempixel.com/output/abstract-q-c-100-100-4.jpg" alt="" class="circle" />
</div>

<div>
  <img src="http://lorempixel.com/output/abstract-q-c-100-100-4.jpg" alt="" class="circle delay" />
</div>

Answer 3

您可以使用transition-delay属性延迟转换的开始。

div {
    -webkit-transition-delay: 2s; /* Safari */
    transition-delay: 2s;
}

W3Schools

使用关键帧和CSS生成圆形图像

3 个答案: