CSS3 Animation On输入缩放计时功能

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>