CSS3笔记---动画功能

1. Transition动画

Transition功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能。（IE11以下支持的不好）

示例：鼠标移动到div上后，1秒内，将div的背景从黄色变成浅蓝色

div{
    background-color: #ffff00; // 黄色
    // 背景色，在1秒内，以linear的方式变化。延迟2秒后执行。
    transition: background-color 1s linear 2s; // 第4个值可选
    // 等同于以下属性
    // transition-property: background-color;
    // transition-duration: 1s;
    // transition-timing-function: linear;
    // transition-delay: 2s;
}
div:hover{
    background-color: #00ffff; // 浅蓝色
}

transition功能也可以同时平滑过渡多个属性值：
示例：1秒内，同时变化背景色，字体颜色和宽度

div{
    background-color: #ffff00;
    color: #000000;
    width: 300px;
    transition: background-color 1s linear, color 1s linear, width 1s linear;
}
div:hover{
    background-color: #003366;
    color: #ffffff;
    width: 400px;
}

示例：右移30像素并顺时针旋转180度

img{
    position: absolulte;
    top: 70px;
    left: 0;
    transform: rotate(0deg);
    transition: left 1s linear, transform 1s linear;
}
div:hover img{
    position: absolute;
    left: 30px;
    transform: rotate(180deg);
}

---

2. Animation动画

Transition功能实现动画的缺点是只能让属性从开始值和终点值之间平滑过渡，不能实现更为复杂的效果。在CSS3中，还可以使用Animation功能，以定义关键帧的方式，实现更为复杂的动画效果。（IE11以下支持的不好）

将div从红色变成深蓝色，从深蓝色变成黄色，从黄色变回红色：

div{
    background-color: red;
}
// 定义关键帧集合，命名为mycolor
@keyframes mycolor{
    // 定义起始关键帧样式
    0%{
        background-color: red;
    }
    // 定义动画过程40%处的关键帧样式
    40%{
        background-color: darkblue;
    }
    70%{
        background-color: yellow;
    }
    100%{
        background-color: red;
    }
}
div:hover{
    animation: mycolor 5s linear;
    // 等同于如下
    // animation-name: mycolor;
    // animation-duration: 5s;
    // animation-timing-function: linear;
    // animation-delay: 2s // 或2000ms
    // 还可以指定动画循环次数
    // animation-iteration-count: 1; // infinite（无限次）
}

Animation也可以实现多个属性值同时改变的动画
示例：同时改变颜色和角度

div{
    position: absolute;
    background-color: yellow;
    top: 100px;
    width: 500px;
}
@keyframes mycolor{
    0%{
        background-color: red;
        transform: rotate(0deg);
    }
    40%{
        background-color: darkblue;
        transform: rotate(30deg);
    }
    70%{
        background-color: yellow;
        transform: rotate(-30deg);
    }
    100%{
        background-color: red;
        transform: rotate(0deg);
    }
}
div:hover{
    // animation: mycolor 5s linear;
    animation-name: mycolor;
    animation-duration: 5s;
    animation-timing-function: linear;
    // 还可以指定动画循环次数
    animation-iteration-count: infinite;
}

去除鼠标悬停的样式，并把此样式直接作用在div上，则动画将在页面打开时进行播放：

@keyframes mycolor{
    0%{
        background-color: red;
        transform: rotate(0deg);
    }
    40%{
        background-color: darkblue;
        transform: rotate(30deg);
    }
    70%{
        background-color: yellow;
        transform: rotate(-30deg);
    }
    100%{
        background-color: red;
        transform: rotate(0deg);
    }
}
div{
    animation-name: mycolor;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

示例：实现网页的淡入效果

@keyframes fadein{
    0%{
        opacity: 0;
        background-color: white;
    }
    100%{
        opacity: 1;
        background-color: white;
    }
}
body{
    animation-name: fadein;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

3. 实现动画的方式

在前面的几个动画示例中，我们只使用一种实现动画的方式------linear。除了linear外，还有几种实现动画的方式：

方式	属性值的变化速度
linear	在动画开始时与结束时以同样的速度进行改变
ease-in	动画开始时速度很慢，然后速度沿曲线值进行加快
ease-out	动画开始时速度很快，然后速度沿曲线值进行放慢
ease	动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢
ease-in-out	动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢