html+css---transition(过渡)/animation(动画)

transition(动画过度)

## transition-property:设置改变的属性

           值：

              单个改变的属性

              all：设置所有改变的属性

              如果同时选择多个属性 用逗号隔开

## transition-duration：设置过渡时间

## transition-delay：设置过渡延迟

## transition-timing-function：设置过渡速度

             可选择：linear 匀速

                    ease 先慢后快再慢

                    ease-in 有慢到快

                    ease-out 由慢结束

                    ease-in-out 设置慢开始和结束

                    cubic-bezier 贝塞尔曲线

        transition:简写 必须要包含变化的属性和过渡时间

# animation(动画)

1.设置关键帧

        2.通过animation引用关键帧

## animation-name:关键帧名字 必填

## animation-duration：设置动画使用时间 必填

## animation-timing-function:设置动画运行的速度

            取值：

            linear 匀速

            ease 慢-快-慢

            ease-in

            ease-out

            ease-in-out

            贝塞尔曲线

            steps(num) 代表动画完成时通过几步

## animation-iteration-count:设置动画播放次数

           取值： infinite 循环

                  num

## animation-direction：设置播放方向

            取值：

                 alternate  正-反-正

                 alternate-reverse 反-正-反

## animation-play-state:设置动画是否停止

              取值：

                 running 播放

                 paused 停止

## animation-fill-mode：设置动画停止是的状态

            取值 ：backwards：

                  forwards