10-CSS3-过渡模块

过渡动画

• 过渡三要素
  1.必须要有属性发生变化
  2.告诉系统哪个属性需要执行过渡效果
  3.必须知道过渡效果持续时长

注：当多个属性需要动画效果时，用","隔开

transition-property:   需要过渡动画的属性
transition-duration:   过渡效果持续时长（秒）
transition-delay:     延迟开始过渡动画（秒）
transition-timing-function: 控制过渡动画的运动速度（linear/ease/ease-in/ease-out/ease-in-out）

过渡动画的运动速度示例：

    
linear
    
ease
    
ease-in
    
ease-out
    
ease-in-out

过渡效果连写格式：
 transition: property duration timing-function delay
 transition: 过渡属性 过渡时长 过渡速度 过渡延迟
transition: width 5s linear 2s,background-color 2s linear 0s;
所有属性相同的过渡效果：transition:all 5s;

• 弹性效果练习
  编写过渡顺序：
  1.1 不要管过渡，先编写基本界面
  1.2 修改认为需要修改的属性
  1.3 再回过头去给被修改属性的那个元素添加过渡效果即可

    嗯
    你
    是
    猪
    吗

• 手风琴效果练习