动作 transition

transition 是 css3 的一大亮点，他常用的大概有以下一些属性：

  • transition-property —规定设置过渡效果的 CSS 属性的名称
  • transition-duration —规定完成过渡效果需要多少秒或毫秒
  • transition-timing-function —规定速度效果的速度曲线
  • transition-delay —定义过渡效果何时开始

一般只是单个动作

  1. .btn{
  2.   background-color: red;
  3.   transition-timing-function: ease;
  4.   transition-property: opacity,background-color,background-radius;
  5.   transition-delay: 0.2s;
  6.   transition-duration: 1s;
  7.   width: 100px;
  8.   height: 50px;
  9.   margin: 0 auto;
  10. }
  12. .btn:hover{
  13.   opacity: 0.3;
  14.   background-color: seagreen;
  15.   border-radius: 5px;
  16. }

animation + @keyframes

实现更复杂的动画效果
@keyframes中的百分比，代表时间尺度上的百分比 ，后面跟着的是此时间点的样式

  1. animation-name: none; /* 动画名称 */
  2. animation-duration: 0; /* 耗时 */
  3. animation-timing-function: ease; /* 效果，默认缓入缓出 */
  4. animation-delay: 0; /* 延迟 */
  5. animation-iteration-count: 1; /* 循环次数 */
  6. animation-direction: normal; /* 正放 or 倒放 */
  1. .blueball {
  2.   ...
  3.   background-color: #0080ff; /* 蓝色 */
  4.   position: relative;
  5.   animation: forward 4s; /* 执行 forward 动画，耗时 4s */
  6. }
  8. /* 三个关键帧： 起点（蓝色），蓝变绿，终点（橙色） */
  9. @keyframes forward {
  10.   0% {left: 0; }
  11.   50% {left: 200px; background-color: #009a61;}
  12.   100% {left: 400px; background-color: orange;}
  13. }

transform

CSS 元素默认的坐标系，原点在左上角；而 transform 变换的原点位于元素中心
  • matrix 矩阵变换
  • translate 位移
  • scale 缩放
  • rotate 绕轴旋转
  • skew[skju:] 倾斜
  • perspective 透视距离