CSS新特性之动画

时间：2019-12-06 13:50:15 收藏：0 阅读：102

动画是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或者一组动画，常常用来实现复杂的动画效果。相比较过度，动画可以实现更多变化，更多控制，连续自动(不需要鼠标经过和鼠标离开来控制)播放等效果。

5.1动画的基本使用

先定义动画
再使用（调用）动画

5.1.1用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px;
    }
}

动画序列

0%是动画的开始，100%是动画的结尾。这样的规则就是动画序列。
在@keyframes中规定某项CSS样式，就能创建以当前样式逐渐转化为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或者用关键词from和to,等同于0%和100%

5.1.2元素使用动画

/*调用动画*/
animation-name: 动画名称；
/*持续时间*/
animation-duration: 持续时间；

举例：

<body>
    <div></div>
</body>

<style type="text/css">
    /*1. 定义动画*/
    @keyframes move {
        0% {
            transform: translateX(0px);
        }
        100% {
            transform: translateX(1000px);
        }
    }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /*2. 调用动画*/
            animation-name: move;
            /*3. 持续时间*/
            animation-duration: 2s;

        }
</style>

5.2动画序列

动画序列

0%是动画的开始，100%是动画的结尾。这样的规则就是动画序列。
在@keyframes中规定某项CSS样式，就能创建以当前样式逐渐转化为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或者用关键词from和to,等同于0%和100%

原文：https://www.cnblogs.com/deer-cen/p/11994686.html