css动画(详解)

你是否惊讶于为啥别人的网站效果那么好，自己的只有简单的布局，和图片加持。没事，这篇博客将带你了解制作动画，让你的网页变得更加生动。

动画的制作：

制作动画，我们需要选择动画的类型，这里我采用的是使用keyframes类型的关键帧动画，

定义一个动画

@keyframes 动画名称{
    关键帧的相应执行操作
}

这里执行的相应操作主要是这个动画的每一帧的执行方法

例如

@keyframes move {
    0%{
        width: 100px;
        height: 100px;
    }
    100%{
        width: 50px;
        height: 50px;
    }
}

动画的起始状态是宽高是100px,终止的状态时 宽高50px。当然，你完全可以添加其他的效果，比如说 transform:translate（0px 10px）;让他直接沿y轴