css动画

transition

过渡，即给属性变化添加过渡效果

 把鼠标放在蓝球上时，蓝球会立刻变透明

.blueball {
  ...
  opacity: 1; /* 不透明 */
}
.blueball:hover {
  opacity: 0.3; /* 透明度 30% */
}

增加 transition 属性，其透明度变化会有一个过渡

.blueball {
  ...
  opacity: 1;
  transition: opacity 1s;  /* 改变 opacity 属性，持续1秒 */
}
.blueball:hover {
  opacity: 0.3;
}

 transition 属性由四部分组成

transition-property: all; /* 过渡属性 */
transition-duration: 0; /* 耗时 */
transition-timing-function: ease; /* 效果，默认 ease（缓入缓出） */
transition-delay: 0; /* 延迟 */

transition 可以同时给多个属性添加过渡效果，比如可以在移动元素的同时，改变其透明度。但不管有多少个属性同时在变化，这种过渡效果只能是一次性的，也就是单个动作.

animation

transition 只能做单个动作，如果动画包含多个动作，这时候就需要 animation

.blueball {
  ...
  background-color: #0080ff; /* 蓝色 */
  position: relative;
  animation: forward 4s; /* 执行 forward 动画，耗时 4s */
}

/* 三个关键帧： 起点（蓝色），蓝变绿，终点（橙色） */
@keyframes forward {
  0% {left: 0; }
  50% {left: 200px; background-color: #009a61;}
  100% {left: 400px; background-color: orange;}
}

@keyframes中的百分比，代表时间尺度上的百分比 ，后面跟着的是此时间点的样式。

完整的 animation 属性：

animation-name: none; /* 动画名称 */
animation-duration: 0; /* 耗时 */
animation-timing-function: ease; /* 效果，默认缓入缓出 */
animation-delay: 0; /* 延迟 */
animation-iteration-count: 1; /* 循环次数 */
animation-direction: normal; /* 正放 or 倒放 */

transform

transition 是一个状态到另一个状态的变化过程

下移100px：

.blueball {
  ...
  transform: translateY(100px);
}

tranform 还可以做很多变换

matrix 矩阵变换

translate 位移

scale 缩放

rotate 绕轴旋转

skew[skju:] 倾斜

perspective 透视距离

 注：

transform 原点位于元素中心

 skew（倾斜）

 perspective（透视）