网站前端制作之CSS常用动画效果

速优网络（10年经验），服务数万家企业，固定透明报价。域名注册、主机/服务器、网站源码一站式服务。实体公司，专业团队，值得选择！建站业务：企业网站建设、公司官网制作、外贸网站建设、网站仿制、网站复制、仿站、外贸建站、单页扒站客服微信【suyoufuwu】

什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式。
您可以随意更改任意数量的 CSS 属性。
如需使用 CSS 动画，您必须首先为动画指定一些关键帧。
关键帧包含元素在特定时间所拥有的样式。
配置动画创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现，具体情况参见使用 keyframes 定义动画序列小节部分。 animation 的子属性有： animation-delay ...
使用 keyframes 定义动画序列一旦完成动画的时间设置，接下来就需要定义动画的表现。通过使用 @keyframes 建立两个或两个以上关键帧来实现。首先编写我们想要的动画

CSS

@keyframes 规则

要创建 CSS 动画，您首先需要了解 @keyframes 规则，@keyframes 规则用来定义动画各个阶段的属性值

优点

浏览器会对CSS3动画做一些优化，导致CSS3动画性能上稍有优势（新建一个图层来跑动画）。
CSS3动画的代码相对简单。 CSS缺点：
动画控制上不够灵活。
兼容性不佳
部分动画无法实现（视差效果、滚动动画）

语法说明如下：

关键帧有两种写法：

From....to
百分比模式%

@keyframes dot {
from {background-color: red;}
to {background-color: yellow;}
}
上下效果同等。
@keyframes dot {
0% { background-color: red;}
100% {background-color: yellow;}
}
接下来编写完动画，需要使用该动画。

CSS效果

animation-name：设置需要绑定到元素的动画名称；
animation-duration：设置完成动画所需要花费的时间，单位为秒或毫秒，默认为 0；
animation-timing-function：设置动画的速度曲线，默认为 ease；
animation-fill-mode：设置当动画不播放时（动画播放完或延迟播放时）的状态；
animation-delay：设置动画开始之前的延迟时间，默认为 0；
animation-iteration-count：设置动画被播放的次数，默认为 1；
animation-direction：设置是否在下一周期逆向播放动画，默认为 normal；
animation-play-state：设置动画是正在运行还是暂停，默认是 running；
animation：所有动画属性的简写属性。

CSS的形体变化 —— Transform API 只能转换由盒模型定位的元素。

Translate(移动)
Scale(缩放)
Rotate(旋转)
Skew(倾斜)

以上就是速优网络和大家分享的"网站前端制作之CSS常用动画效果",非常感谢您有耐心的读完这篇文章，我们将为您提供更多参考使用或学习交流的信息。我们还可为您提供：企业网站建设、网站仿制、网站复制、仿站、外贸网站建设、外贸建站、公司官网制作等服务，本公司以“诚信、专业、务实、创新”的服务理念服务于客户。如您需要合作，请扫码咨询，我们将诚挚为您服务。

TAG标签：

上一篇：企业网站“好内容”生产需要“五心”

下一篇：如何让网站、公众号等平台内容更具吸引力？