CSS3 动画

主题

默认模式
浅蓝色模式
淡红色模式
深夜模式

CSS3 动画

CSS3 动画允许您在不使用 JavaScript 或 Flash 的情况下创建动画效果。它由两个主要部分组成：关键帧(@keyframes)和动画属性。悬停（手机端点击）下面的卡片，查看元素的动画效果：

动画效果

CSS3 @keyframes 关键帧

CSS3 的@keyframes关键帧，用于用于定义动画在不同阶段的样式。

当在@keyframes创建动画时，必须将它绑定到一个选择器上，选择器至少绑定（动画名称、动画时长）这两个动画属性。

div {
    animation-name: example;  /* 动画名称 */
    animation-duration: 4s;   /* 动画时长 */
}

@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

实现的效果：

背景动画

CSS3 动画与过渡的区别

特性	CSS 过渡	CSS 动画
触发方式	需要触发(如:hover)	可以自动开始
复杂度	简单状态变化	可以定义多个关键帧
循环	不能循环	可以循环
方向控制	有限	可以反向、交替等
性能	通常更好	可能稍差(复杂时)

CSS3 动画属性

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。

CSS3 过渡 CSS3 多列

评论区 0

发表评论

教程介绍

CSS3 是 CSS 技术的版本升级，在 CSS 基础上进行了扩展改进，引入了新的特性和模块。

36 章节

71 阅读

0 评论

CSS3 动画

CSS3 动画

CSS3 @keyframes 关键帧

实现的效果：

CSS3 动画与过渡的区别

CSS3 动画属性

CSS 基础教程

CSS3 教程

CSS3 动画

CSS3 动画

CSS3 @keyframes 关键帧

实现的效果：

CSS3 动画与过渡的区别

CSS3 动画属性

CSS 基础教程

CSS3 教程

意见反馈

反馈提交成功