css动画

孤峰

CSS 也可以实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash

什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式

可以随意更改任意数量的 CSS 属性

如需使用 CSS 动画，首先为动画指定一些关键帧

关键帧包含元素在特定时间所拥有的样式

@keyframes 规则和所有 CSS 动画属性

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

@keyframes 规则

通过 @keyframes 规则，您能够创建动画

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 *

0% 是动画的开始时间，* 动画的结束时间

为了获得*佳的浏览器支持，您应该始终定义 0% 和 * 选择器

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定

语法：@keyframes animationname {keyframes-selector {css-styles;}}

属性值

值	描述
animationname	必需。定义动画的名称。
keyframesselector	必需。动画时长的百分比。合法的值：0-from（与 0% 相同）to（与相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

实例

上一篇: 很抱歉没有了

下一篇: CSS 过渡

*声明：css动画有哪些内容来源于网络收集和整理，版权归原著所有，如来源信息有误或侵犯权益，请联系站长作修改和删除处理。