css动画效果-animation

一、定义动画

示例：第一种写法。

示例：第二种写法。

代码如下：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            animation: change 1s;
        }

        @keyframes change {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

这里对以上代码进行效果展示：

二、复合属性

1.animation语法使用

提示：取值不分先后顺序

2.动画拆分写法:

动画使用方式:

/* linear:匀速 */
animation: change 1s linear;

/* steps(4):分步动画 */
animation: change 1s steps(4);

/* 2s:延迟时间 */
animation: change 1s 2s;

/* infinite:无限循环,数字:表示重复的次数 */
animation: change 1s infinite;
animation: change 1s 3s;

/* alternate:反向 */
animation: change 1s infinite alternate;

/* backwards默认值,动画停留在开始状态 */
animation: change 1s backwards;

/*forwards: 动画停留在结束状态 */
animation: change 1s forwards;