简单动画（过渡）与复杂动画

过渡与动画

简单动画—过渡（transition）

简单动画通常称之为过渡（transition）

一定时间内，从一个值变化到另一个值

transition-property过渡的属性（all表示所有可过渡属性）

注：需要过渡的属性必须给固定值，即不能给auto

transition-duration过渡的时间

    transition-duration: 30ms;
    transition-property: width height;

transition-timing-function过渡速度

transition-timing-function: ease;默认值，先慢后快再变慢
transition-timing-function: linear;匀速
transition-timing-function: ease-in;慢速开始 慢速结束
transition-timing-function: ease-out;快速开始 慢速结束
transition-timing-function: ease-in-out;慢速开始结束，中间先快后慢

简写：

    transition: all linear 2s;  

可以过渡的属性：颜色、尺寸、透明度

因此让一个标签的展示效果从无到有，一般是设置透明度，效果发生后再给颜色

复杂动画

1.定义（创建）动画：

书写格式：@keyframes 自定义动画名{动画效果}

动画效果：百分率{声明块}

注：百分率是声明块（即：单独的每一次）动画的时间

如果起始效果和结束效果一致，可省略结束效果的代码

@keyframes aliang {
    0% {
        left: 50px;
        color: darkviolet;
        border-radius: 50%;
    }

    50% {
        left: 150px;
        top: 150px;
        color: floralwhite;
        border-radius: 0px;
    }

    90% {
        left: 250px;
        top: 250px;
        color: floralwhite;
        border-radius: 0px;
    }
}

2.引用动画：

animation:动画名 动画用时 播放次数;

    animation: aliang 5s infinite;

使用外部animate文件的动画

需要在class中先添加antimated

再添加动画名称（HTML需提前引用css文件）

3.延时效果

transition-delay:在规定时间以后展示动画效果

    transition-delay: 500ms;

简单动画与复杂动画的区别在于：

前者是从状态1变化到状态2，即:只能实现一次变化效果。
而后者是从状态1变化到状态N，可以实现多次变化效果