Question

我试图使用动画计时功能让动画以有弹性的方式向上和向下缩放。

@keyframes iconEnter
  0%
    transform scale(0)
  100%
    transform scale(1)
    animation-timing-function cubic-bezier(.1,.85,.1,1)

.icon
  animation iconEnter 5s

这只是在没有应用定时功能的情况下线性扩展。我做错了什么？

感谢。

Answer 1

您可以在2个地方设置计时功能：全局位于您设置动画的位置，或者位于关键帧规则中。

但是，在后一种情况下，你总是有n个关键帧和n - 1个时间间隔。在您的情况下，2个关键帧和1个时间间隔。

关键帧上声明的计时功能适用于此关键帧中开始的时间间隔。

因此，在关键帧上应用定时功能的正确方法将在第一个：

@keyframes iconEnter {
    0% {
        transform: scale(0.1);
        animation-timing-function: cubic-bezier(.25,8,.25,-8);
    }
    100% {
        transform: scale(1);
    }
}


div {
    width: 100px;
    height: 100px;
    margin: 100px;
    background-color: tomato;
    transform: scale(0.1);
}
body:hover div {
    animation: iconEnter 4s forwards;
}

<div></div>

Answer 2

不确定您对时间功能的期望;它在Chrome 59上为我工作。

有人说......

我可以使用keyframes，TranslateX和scale

获得所需的结果

代码可以大大缩短，但我把所有内容留给了演示目的。

（粗略）工作示例：

@keyframes iconEnter {
  0% {
    transform: scale(0)
  }
  10% {
    transform: scale(0.1) translatey(30px)
  }
  20% {
    transform: scale(0.2) translatey(-30px)
  }
  30% {
    transform: scale(0.3) translatey(30px)
  }
  40% {
    transform: scale(0.4) translatey(-30px)
  }
  50% {
    transform: scale(0.5) translatey(30px)
  }
  60% {
    transform: scale(0.6) translatey(-30px)
  }
  70% {
    transform: scale(0.7) translatey(30px)
  }
  80% {
    transform: scale(0.8) translatey(-30px)
  }
  90% {
    transform: scale(0.9)translatey(30px)
  }
  100% {
    transform: scale(1) translatey(0deg)
  }
}

.icon {
  animation: iconEnter 10s;
  border-radius: 100vw;
  animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1)
}

<img src="https://unsplash.it/100/100" class="icon">

Answer 3

首先，你需要将计时功能设置为图标，而不是关键帧，但我不确定，如果这是你想要的？如果您希望图标向上扩展，然后向下，则再向上，您需要在0％和100％之间添加步骤

@keyframes iconEnter{
  0%{
    transform: scale(0);
    
    }
  100%{

    transform: scale(1);
    }
}
    
.icon{
  position:absolute;
  width: 30px;
  height: 30px;
  background: blue;
  animation: iconEnter  5s;
  animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

<div class="icon">

</div>

CSS3 Animation On输入缩放计时功能

3 个答案: