下面是一个简单的例子，让一个方块在3秒内从左侧移动到右侧：
div {
position: relative;
width: 100px;
height: 100px;
background-color: red;
animation: move 3s;
}
@keyframes move {
from {
left: 0;
}
to {
left: calc(100% - 100px);
}
}大家首先设置一个
元素，将其定位为相对定位，设置宽度和高度，还有一个背景颜色。接着，在
元素上应用了一个名为“move”的动画，时长为3秒。其中，@keyframes定义了大家想要实现的动画效果，也就是从左侧移动到右侧。在动画开始时，方块位于左侧，所以left值为0；而在动画结束时，方块位于右侧，所以left值为calc(100% – 100px)，相当于视口宽度减去方块的宽度。
除了left属性，还可以像这样对其他属性设置动画效果：
div {
width: 100px;
height: 100px;
background-color: red;
transition: all 1s;
}
div:hover {
width: 200px;
height: 200px;
background-color: blue;
}在这个例子中，大家设置了一个
元素，设置了宽度、高度和背景颜色，并为其应用了一个过渡效果。当鼠标悬停在元素上时，宽度和高度都会变成原先的两倍，背景颜色也会变成蓝色。由于大家在
元素上设置了过渡效果，所以这些属性的变化都会呈现出动画效果。
总的来说，CSS3的动画效果可以通过简单的代码实现，让页面看起来更加生动有趣。