【CSS3】CSS3动画——我离前端的炫酷又近了一步

博客说明

文章所涉及的部分资料来自互联网整理，当然还有自己个人的总结和看法，分享的目的在于共建社区和巩固自己。引用的资料如有侵权，请联系本人删除！幸好我在，感谢你来！

说明

CSS3 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash。

为了学习前端的动效，我简直是不折手段。目前就抓着CSS的动画来搞一波。

什么是动画

⭕老规矩，问句开头。

在需要变化的时间节点上指定一些关键帧，关键帧就是此刻所定义的样式。例如我在1s左移5m，3s左一15m，这时就有两个关键帧，因为这两个关键帧，画面就发生了位移，那么动画也就产生了。

下面这句话总结到位：动画使元素逐渐从一种样式变为另一种样式。

CSS3的动画主要依赖@keyframes和animation来实现。

@keyframes和animation的浏览器支持

@keyframes 规则

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

@keyframes myfirst
{from {background: red;}to {background: yellow;}
}

以上的就是一个简单的动画，关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。也就是从红色变成黄色。

为了得到最佳的浏览器支持，使用 0% 和 100% 选择器是最好的选择。

animation

animation既然动画的关键帧都有了，那么就需要把这个关键帧落实并绑定到某个DOM上。

语法

可以一起写，也可以分开写属性。

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name

指定要绑定到选择器的关键帧的名称

语法

animation-name: keyframename|none;
// keyframename 指定要绑定到选择器的关键帧的名称

animation-duration

动画指定需要多少秒或毫秒完成

语法

animation-duration: time;
// time 指定动画播放完成花费的时间。

animation-timing-function

指定动画将如何完成一个周期

语法

animation-timing-function: value;

动画函数