【46】CSS3 （4）——新增属性④动画

动画

• css3 中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
• css3 动画制作分为两步：创建动画、绑定动画。
• 本文目录如下：
  

---

一、创建动画

1. @keyframes 规则介绍

• @keyframes 规则用于创建动画；
• 在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样式逐渐变化为另一种样式的效果；
• 可以改变任意多的样式任意多的次数；
• 需要使用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。

2. @keyframes 书写方法

@keyframes 动画名称 {
   
     动画过程，可以添加任意百分比处的动画细节 
 }

2.1举例（用关键词 “from” 和 “to”）

 @keyframes move {
   
/* 从头开始，最好保持跟默认样式的状态一致 */
from {
   
     transform: translateY(0);
}
/* 到结束位置 */
to {
   
   transform: translateY(100px);
}

2.2举例（百分比）

@keyframes move2 {
   
      0% {
   
        transform: translateY(0)