CSS动画

transition 过渡动画

• 设置过渡动画效果的CSS属性名称
  • all 全部
  • left
  • width
  • height
  • bottom
  • ...
• 完成过渡动画效果所需要的时间
  • 1s(以秒为单位)
• 动画的运动曲线
  • ease 平滑过渡(慢->快->慢) 默认值
  • linear 线性过渡(以相同的速度开始和结束)
• 延迟过渡动画效果的开始时间
  • 1s(以秒为单位)

transform 向元素应用2D或3D转换

translate 移动位置

• translate(x,y) 定义x,y轴的位置
• translate(x) 定义x轴的位置，y轴默认为0
• tanslateX(x)
• tanslateY(y)

.box:hover{
    -webkit-transform:translateY(-100px);
    transform:translateY(-100px);
}

scale 缩放

单位:n(倍数)

• transform: scale(x,y); 定义x/y的值
• transform: scale(n);

当scale的值 大于1是放大，小于1是缩放，等于1默认值

.box:hover{
    -webkit-transform: scale(.5);
    transform: scale(.5);
}

rotate 旋转

单位：deg(角度)

• transform: rotate(n); 值为正数，顺时针方向
• transform: rotate(-n);值为负数，逆时针方向

 .box:hover{
    -webkit-transform: rotate(-3600deg);
    transform:  rotate(-3600deg);
}

skew倾斜

单位：deg(角度)

• transform: skew(-90deg); 负数时，顺时针
• transform: skew(90deg); 正数时，逆时针

.box:hover{
    -webkit-transform: skew(-90deg);
    transform: skew(-90deg);
}

animation 帧动画

规定好动画的效果

• 指定关键帧动画 @keyframes
• 给动画起一个名称
• 大括号{}
  • 0%{} 动画开始的位置 100%{} 动画结束的位置
  • from{} 动画开始的位置 to{} 动画结束的位置
  • from to 和 0% 100% 的区别？
  • 0%{} 50%{} 100%{} 动画效果可以分段，而form to不可以

transform 转换：translate 移动位置、scale缩放、rotate 旋转、skew 倾斜..

给指定的元素添加动画效果

• 动画的名称
• 动画效果所完成的时间
  • 以秒为单位 s
• 动画运动曲线
  • ease
  • linear
• 延迟动画开始的时间
• 动画效果运行的次数
  • 具体的次数 n, 默认值为1
  • infinite 无限次
• 动画结束后的状态
  • both
  • backwards
  • forwards

steps

是一个定时功能，允许我们将动画分割成段，而不是从一种状态持续到另一种状态的过渡
参数是一个正值，指定我们希望动画分割的段数。
steps 一般用在雪碧图的动画效果上