【CSS3动画】从简单动画到实现平抛运动和弹跳效果-贝塞尔曲线的利用

基础概念

如果你几乎不了解CCS3动画，下面会介绍一些基本概念，熟悉的朋友可以跳过基础概念部分。

假想想要一个正方形的盒子动起来，我们分别需要在html和css文件中进行设置。html比较简单，创建一个div随意class命名即可。接下来来看CSS，加入动画就需要给盒子设置几个关键帧，而CSS中的@keyframe可以把多个关键帧整合到一起，叫做一个动画序列。它需要一个自定义动画名称，起始状态和终止状态的信息。以下是模版。

@keyframe animationName {
    0% {
        ...;
    }
    100% {
        ...;
    }
}

需要注意的是，0%和100%就指的是起始位置和终止位置，分别代表两个关键帧，当然在其中也可以插入更多的关键帧，需要用百分比表示。如果单纯只需要起始位置和终止位置两个关键帧，也可以用from和to来分别代替0%和100%。其次，关键帧中间的内容可以自由定义。

这里我想实现小盒子放大成两倍的动画。我选择使用transform: scale()去实现，这个也是CSS3新增的特性，不了解也没关系，可以直接设置起始宽高为50px，终止宽高为100px，也是同样的效果。

然后我们就可以把我们的动画序列赋予到html元素上去啦～

@keyframes zoom{
    0%