css动画制作步骤 |css3设置网页自适应宽度

1. 设置元素样式

首先，先设置需要动画的元素样式，比如宽高、位置、背景色、边框等等。如下：

.box {
width: 100px;
height: 100px;
position: relative;
background-color: red;
border: 1px solid black;
}

2. 定义动画

接着，定义动画的关键帧，即在不同时间点元素应该具有什么样的样式。用@keyframes关键字来定义，如下：

@keyframes move {
0% {
/* 元素在动画开始时的状态 */
left: 0;
}
100% {
/* 元素在动画结束时的状态 */
left: 200px;
}
}

这段代码定义了一个名为move的动画，从0%的时间点开始，元素的left属性为0，到100%的时间点时，元素的left属性变为200px。

3. 应用动画

最后，将动画应用到具体的元素上，使用animation属性，如下：

.box {
animation: move 2s linear infinite;
}

这段代码将定义的move动画应用到.box元素上，动画时长为2秒，动画效果为线性，即匀速移动，而infinite表示动画无限循环。

完成以上三个步骤，就可以制作一个简单的CSS动画了。当然，如果需要更复杂的动画效果，可以完善关键帧的定义，或者使用CSS动画库。