css3如何实现动画？常用的动画方法总结

在css中创建简单的过渡效果可以从以下几个步骤来实现

（1）在默认样式中声明元素的初始状态样式

（2）声明过渡元素最终状态样式，比如悬浮状态

（3）在默认样式中通过添加过渡函数，添加一些不同的样式

1. 变形
2D变形：旋转变形、缩放变形、斜切变形、位移变形

// 旋转变形，顺时针角度为正，逆时针角度为负
transform：rotate(45deg)；
// 自定义变换原点：
transform-origin:0 0; //以左上角为中心点旋转
transform-origin:0 100px; //以左下角为中心点旋转

// 缩放变形，大于1表示放大，小鱼1表示缩小
transform：scale(3);
// sx表示宽度缩放为原元素的sx倍，sy表示高度缩放为原元素的sy倍
// 如原宽1000px，高500px，缩为宽300px，高100px
transform：scale(300/1000，100/500);
transform：scale(.3,.2);

// 斜切变形(x斜切角度，y斜切角度)，逆时针为正方向，顺时针为负方向
transform：skew(10deg,20deg)

// 位移变形(向右移动，向下移动)
transform:translate(100px,200px);

3D变形：

// x表示绕横轴旋转，y表示绕纵轴旋转，z相当于绕平面旋转
transform：rorateX(30deg);
transform：rorateY(60deg);
transform：rorateZ(45deg);

2.过渡属性transition
css3的transition功能很简单： css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑地以动画效果改变css的属性值。

css3过渡与元素上的常规样式一起声明。只要目标属性更改，浏览器就会应用过渡。除了使用JavaScript触发动作外，在css中也可以通过一些伪类来触发，如:hover、:focus、:active、:target和:checked等。

以下是使用css创建简单过渡的步骤：
（1）在默认样式中声明元素的初始状态样式
（2）声明过渡元素最终样式，比如悬浮状态
（3）在默认样式中通过添加过渡函数，添加一些不同的样式。

那么，什么属性可以参加过渡？
1.所有数值类型都可以参与过渡：如:width 、height、left、top、border-radius、bottom等
2.背景颜色和文字颜色都可以被过渡
3.所有变形（包括2D和3D都能被过渡）

transition:width 1s linear 0s；
// 表示：宽度参与过渡，动画时长为1s，匀速变化，延迟0s

过渡的4个小属性：
transition-property 哪些属性要过渡
transition-duration 动画的事件
transition-timing-function 动画变化曲线（缓动效果）
transition-delay 动画延迟的时间（等多少s开始过渡）

// all表示所有属性都参与过渡
transition:all 1s linear 0s；

过渡的缓动效果
transition-timing-function属性
transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

如：将元素的宽度从100px变为300px

transation的局限性
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。

3.animation动画
@keyframes规则
keyframes被称为关键帧，其类似于flash中的关键帧。在css3中其主要以“@keyframes"开头，后满紧跟着是动画名称加上一对花括号{…}，括号中就是一些不同时间段样式规则

在一个"@keyframes"中的样式规则可以有多个百分比构成的，如在”0%"到"100%"之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。

需要注意的是：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to

@keyframes changecolor{
  0%{
    background: red;
  }
  20%{
    background:blue;
  }
  40%{
    background:orange;
  }
  60%{
    background:green;
  }
  80%{
    background:yellow;
  }
  100%{
    background: red;
  }
}

相当于

@keyframes changecolor{
  from{
    background: red;
  }
  20%{
    background:blue;
  }
  40%{
    background:orange;
  }
  60%{
    background:green;
  }
  80%{
    background:yellow;
  }
  to{
    background: red;
  }
}

动画的属性值：infinite自动执行；alternate交替执行（永远执行），fowards保留状态，还可以加执行次数

// 动画执行完之后保留状态
animation：r 1s linear 0s forwards;

// 动画执行3次
animation：r 1s linear 0s 3;

// 动画永远执行
animation：r 1s linear 0s infinite;

// 正方形背景颜色由红变绿，永远交替执行

// 正方形背景颜色由红变绿之后，保持绿色

// 正方形背景颜色由红变绿交替3次之后，变回初始的红色