day09

过渡

transition
* transition-property：过渡属性的名称
* transition-duration：过渡属性的时长
* transition-delay：过渡等待时长
* transition-timing-function：过渡速度，匀速：linear慢快慢：ease慢速开始：ease-in慢速结束：ease-out慢速开始，慢速结束ease-in-out
* 简写：transition: width 2s linear 2s,background-color 2s ease-out 0s;

动画

animation
定义动画帧：

@keyframes move {
    /* 开始状态 结束状态 过程状态 */
    0%{
        margin-left: 0;
    }
    25%{
        margin-left: 150px;
    }
    50%{
        margin-left: 250px;
    }
    100%{
        margin-left: 500px;
    }
}

• animation-name：设置动画名称
• animation-duration：设置动画持续时长
• animation-timing-function：设置动画速率linear匀速，与过渡相同
• animation-delay：设置动画延迟
• animation-iteration-count：设置动画执行次数，infinite无数次
• animation-direction：设置动画是否反向执行，alternate反向执行
• animation-fill-mode：设置动画结束停留在哪一帧，forwards 最后一帧 backwards第一帧
• 简写：animation: move 2s ease-in-out 0s infinite alternate;
• animation-play-state：动画暂停执行，paused表示暂停 running表示播放