卓音第五次讨论班—CSS过渡、动画

关键字：transition,animations，关键帧 @keyframs

CSS过渡

过渡可以为某一个元素在不同状态之间切换时，定义不同的过渡效果。

比如在不同的伪元素（：hover、：active）或通过JS实现的状态变化

transition属性是一下属性的简写属性

属性	含义
transition-property	规定应用过渡的CSS属性的名称 。默认为all
transition-duration	规定过渡效果的完成时长。默认是0s
transition-timing-function	规定过渡效果的时间曲线。默认是ease
ransition-delaay	规定从元素加载完成到执行过渡效果的延迟时间。默认为0s

简写语法

div {
    transition:<property> <duration> <timing-function> <delay>
}

过渡实例

例子① 鼠标悬停时4s过渡改变字体大小，0.5s延迟

        div {
            transition-property: font-size;
            transition-duration: 4s;
            transition-delay: 0.5s;
            font-size: 14px;
        }

        div:hover {
            font-size: 36px;
        }

CSS动画

animations：从一个CSS样式配置转换到另一个CSS样式配置。
动画包括两个部分：①描述动画的样式规则 ②用于指定动画开始、结束以及中间点样式的关键帧

配置动画

animation子属性	功能描述
animation-delay	设置延时，即从元素加载完成到动画序列开始执行的时间
animation-direction	设置动画每次运行完后是反向运行还是回到开始位置重复运行
animation-duration	设置动画一个周期的时长
animation-iteration-count	设置动画重复次数，可以指定infinite无限次重复动画
animation-name	设置@keyframes描述的关键帧名称
animation-play-state	允许暂停和恢复动画
animation-timing-function	设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化
animation-fill-mode	指定动画执行前后如何为目标元素应用样式

animation-direction可取值	含义
normal	正常速度播放
reverse	反向播放
alternate	奇数次正向播放，偶数次反向播放
alternate-reverse	奇数次反向播放，偶数次正向播放

animation-timing-function可取值	含义
linear	匀速
ease	慢-快-慢
ease-in	低速开始
ease-out	低速结束
ease-in-out	低速开始和结束

使用keyframes定义动画序列

通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

关键帧使用percentage指定动画发生的时间点。0%表示动画发生的第一时刻，100%表示最终时刻。（别名：0% => from、100% => to）

两个时间点都是可选的，其中一个未指定时，使用计算值开始或结束动画。

动画实例

例子①动画实现p段落从左边滑入，持续时间3s

        p {
            animation-duration: 3s;
            animation-name: slidein;
            /* animation-iteration-count: infinite; */
            animation-direction: alternate;
        }
        @keyframes slidein {
            from {
                margin-left: 100%;
            }
            to {
                margin-left: 0%;
            }
        }

注意：webkit内核浏览器或者早期版本浏览器可能需要 -webkit-前缀

过渡效果和动画效果的异同

• 相同点：两个属性都可以使元素动起来
• 不同点：
  • transition需要有一个事件（:hover，:active）才可以触发,animation不需要
  • transition只能定义一组（开始，结束）关键帧， animation可以定义多组关键帧