css 动画效果整合

动画效果 之 果冻大法

这一系列用来记录不同的动画效果，首先我们来讲讲果冻动画，何为果冻动画，就是鼠标放上去会Duang左右弹跳一下，完成动作就停。

多说无益，来看看最终实现效果先。上展示：

那么我们来看看这个动画 keyframes是如何写的:

@keyframes jelly-jump {
    0% {
        transform: translate(0);
    }
    10% {
        transform: translateY(5px) scale(1.2) scaleY(0.8);
    }
    30% {
        transform: translateY(-13px) scale(1) scaleY(1) rotate(5deg);
    }
    50% {
        transform: translateY(0) scale(1) rotate(0);
    }
    55% {
        transform: translateY(0) scaleX(1.1) scaleY(0.9) rotate(0);
    }
    70% {
        transform: translateY(-4px) scaleX(1) scaleY(1) rotate(0);
    }
    80% {
        transform: translateY(0) scaleX(1) scaleY(1) rotate(0);
    }
    85% {
        transform: translateY(0) scaleX(1.05) scaleY(0.95) rotate(0);
    }
    to {
        transform: translateY(0) scaleX(1) scaleY(1);
    }
}

任何一个东西我们要它hover上去Duang Duang来一个下，加下面这句话就完事了👇。

li:hover img {
    animation: jumps-data 1.2s ease 1;
}

图标鼠标悬浮上去，图片出现这个动画。

动画效果 之 呼吸大法

所谓呼吸大法，它是永动的，css animation永动效果就要靠infinite加持，呼吸还有一个特点就是交替，css animation就要靠alternate。

总体来说就是

animation: breath .7s infinite alternate;

效果如下：

@keyframes breath {
    0% {
        transform: scale(1);
    }

    to {
        transform: scale(1.2);
    }
}

动画效果 之 弹簧大法

效果如下:

就把这个图标当成一个橡皮球，模拟橡皮球自由落地的反弹曲线

animation: bounce 2.5s infinite 0.5s both

@keyframes bounce {
    0%,
    7%,
    25%,
    36%,
    45%,
    50% {
        animation-timing-function: ease-out;
        transform: translate3d(0, 0, 0);
    }
    
    15%,
    16% {
        animation-timing-function: ease-in;
        transform: translate3d(0, -42px, 0);
    }

    30% {
        animation-timing-function: ease-in;
        transform: translate3d(0, -24px, 0);
    }

    41% {
        animation-timing-function: ease-in;
        transform: translate3d(0, -12px, 0);
    }

    47% {
        animation-timing-function: ease-in;
        transform: translate3d(0, -3px, 0);
    }
}

完毕。以后有其他的再补充。