CSS3-过渡

使用属性transition为元素配置过度

能用数值配置的属性，基本上都可以通过transition-property配置过度，例如：

• height，width
• background-color
• 2D变换和3D变换的属性都可以实现过渡
• box-shadow
• opacity
• all：所有能过渡的属性，都发生过渡
• ……

.box{
    /* 设置哪个属性需要配置过度 */
    transition-property: height;
    
    /* 设置过渡的时间 */
    transition-duration: 1s;
}

duration中文释义：期间

高级使用

transition-delay

过渡延迟，当事件发生后经过延迟后在执行过渡

transition-timing-function

过渡的动画方式

• ease：默认值，平滑过渡（慢-快-慢）
• linear：匀速的
• ease-in：先慢后快
• ease-out：先快后慢
• ease-in-out：慢快慢，相对于ease不够平滑
• step--start：一步结束，不考虑时间
• step-end：在duration时间过去后，一步结束
• steps()：分步骤进行过度
• cubic-bezier：贝塞尔曲线，可以用来实现橡皮筋效果

cubic-bezier✿ cubic-bezier.com

通过这个网站来调整出贝塞尔曲线的具体数值

CSS3-动画

• animation-name：为元素增加动画

• animation-duration：配置动画持续时间

• animation-delay：配置动画的延迟时间

.inner{
    animation-name: donghua;
    animation-duration: 3s;
}

/* 简易配置模式 */
@keyframes donghua{
    /* 第一帧 */
    from{
        
    }
    /* 最后一帧 */
    to{
        transform: translateX(900px);
    }
}


/* 完整配置方式 */
@keyframes donghua{
    /* 第一帧 */
    0%{
        
    }
    /* 最后一帧 */
    100%{
        transform: translateX(900px);
    }
}

其他属性

• animation-timing-function：动画的过渡方式

  • 与过渡可选值相同

• animation-iteration-count：动画播放的次数

  • infinite：无限循环

• animation-direction：动画的方向

  • normal：正常方向（from-to）
  • reverse：反转方向（to-from）
  • alternate：往复运动
  • alternate-reverse：反转的往复运动

• animation-fill-mode：动画之外的效果（动画静止时的显示效果）

  • forwards：保持最后一帧的状态
  • backwards：初始第一帧的状态

• animation-play-state：动画的播放状态

  • pause：暂停动画

注意事项

• 过渡一定要加在想要执行过渡的原始元素上
• 两者都可以使用复合属性，需要注意的两个时间的顺序问题，第一个时间为持续时间，第二个属性为延迟时间，如果只写一个默认为持续时间
• 动画不需要任何的触发条件，过渡必须得有一个触发条件
• 动画可以通过对关键帧的控制来处理形变时的细枝末节，而过渡多数用来把控形变前和后的状态
• 过渡多用于交互的美观和流畅性，所以用的更多