文章目录

一、CSS3 动画简介

---

" 动画 " 是 CSS3 相较于 CSS 的 颠覆性 特性 之一 ;

在 CSS3 中 , 可以设置 多个 动画节点 , 精确地 控制 一个动画 或 若干动画 , 实现 复杂 的 动效 ;

动画可以实现 :

等效果 ;

二、CSS3 动画实现步骤

---

CSS3 动画 实现 步骤 :

@keyframes element-move {  0% { transform: translateX(500px); }  100% { transform: translateX(0); }  
 }  
 

.anim-element {  animation-name: element-move;  animation-duration: 1s;  
 }
 

上述 .anim-element 选择器 选中的 标签元素 , 会执行 名称为 " element-move " 的动画 , 该动画将会在 1 秒内 把 将 标签元素 从右边 500px 位置 移动到 左边 0px 位置 ;

三、动画定义

---

动画定义语法 : @keyframes 动画名称 中定义的是 CSS 样式 , 可以定义一个由当前 初始状态 样式 逐渐 变为 终止状态 样式 的 动画效果 ;

@keyframes 动画名称 {  0% { 动画初始状态 }  100% { 动画终止状态 }  
 }  
 

使用 百分比 可以 定义 动画样式 变化 的发生时间 , 也可以使用 from 和 to 关键字 ;

动画序列 规则 :

动画 样式 个数 和 执行 次数 :

四、代码示例

---

代码示例 :

执行结果 :