Question

我试图在悬停时缩放动画中的元素。我的动画包含三个元素

li{
  &.current-projects {
    -webkit-animation: first 5s infinite ease-in-out;
    animation: first 5s infinite ease-in-out;
  }

  &.secret {
    -webkit-animation: second 5s infinite ease-in-out;
    animation: second 5s infinite ease-in-out;
  }

  &.favorite {
    -webkit-animation: third 5s infinite ease-in-out;
    animation: third 5s infinite ease-in-out;
  }    
  &:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-filter: brightness(80%);
    filter: brightness(80%);
  }
}

在我的每个动画中都会调用transform方法。

@-webkit-keyframes first {
  0% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    right: 50%;
    top: 0%;
  }

  33% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    right: 0;
    top: 100%;

  }

  66% {
    -webkit-transform: translate(100%, -100%);
    transform: translate(100%, -100%);
    top: 100%;
    right: 100%;
  }

  100% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    right: 50%;
    top: 0%;
  }
}

我的问题是，在悬停时，我已将图像设置为在其中一个悬停时冻结到位，但我无法按比例缩放。它似乎来自于我的动画中的变换（亮度有效但没有缩放），有没有办法可以使用css或js缩放它们并让它们实际缩放？ http://cdpn.io/oKpBh

Answer 1

我尝试了一些东西，但我不确定这是否是你想要的：http://codepen.io/nighrage/pen/qywCi/

li上的动画似乎阻止了对象的扩展。所以你可以做的就是在li上添加动画并将背景添加到a标签中，并为链接指定高度和宽度为6em。

http://codepen.io/nighrage/pen/ExvHq/

我没有弄清楚代码，但我相信你能够做到这一点。

使用相同属性缩放动画内的元素

1 个答案: