Web前端学习整理(十)

过渡

transition

功能:用于实现元素变化的平滑程度.

实现:需要设置:起始位置,时间和终点位置.

过渡可以设置给任何css样式,但是前提是一定要有变化.

transition: all 5s;

说明:设置所有样式的过渡程度.

transition是一个复合属性:

        transition-name 选取样式名称

        transition-duration 生效时间

        transition-delay 延时时间

        transition-timing-function 过渡曲线

                -ease 先慢再快再慢

                -linear 迅速

                -ease-in 匀加速

                -ease-out 匀减速

                -ease-in-out 先加速再减速

---

动画

animation

通过设置动画关键帧来创建动画之后再选取动画

也是复合属性

animation-name 设置动画名称

animation-duration 设置动画播放时间 单位秒(s)

animation-delay 动画执行延迟 单位秒(s)

animation-iteration-count 设置执行次数默认为1次

        -infinite 无数次

animation-direction 动画执行方向,默认值按照书写顺序执行

        -reverse 反方向

        -alternate 正反交替,可以实现气泡效果

        -alternate-reverse 反正交替

复合写法格式

animation: name duration iteration-count  delay direction timing-function

设置动画状态:控制动画开关

animation-play-state:

        paused 停止动画

        running 执行动画

动画通过@keyframes设置关键帧,不予介绍.