css3动画的样式语法 |css修饰表格

.animation {
animation-name: move;
animation-duration: 2s;
animation-timing-function: ease;
}
@keyframes move {
0% {
left: 0;
top: 0;
}
100% {
left: 200px;
top: 200px;
}
}

首先，大家需要在CSS选择器中定义一个动画类。然后，大家将动画名称定义为“move”，并使用animation-name属性来将其应用到元素身上。

接下来，大家需要为动画设置持续时间，通常使用animation-duration属性来设置，以秒为单位。在本例中，大家将持续时间设置为2秒。

使用animation-timing-function属性，大家可以指定动画的缓动函数，这可以让动画看起来更自然。在本例中，大家将缓动函数设置为“ease”。

在大家定义好动画的样式之后，接下来就需要定义动画的具体细节。大家可以通过使用@keyframes指令来定义动画中的各个关键帧。

在本例中，大家定义了两个关键帧。第一个关键帧是在动画开始时，元素的left和top属性值都为0。第二个关键帧是在动画结束时，元素的left和top属性值分别为200px。

最后，在关键帧的定义完成后，大家就完成了整个动画的定义。通过将所有的CSS类应用到HTML元素中，大家就可以使用CSS3动画的样式语法来控制HTML元素的动态效果。