CSS3正是将动画效果提升到了一个全新的水平，很多旧的浏览器不再支持CSS3，对于开发者来说，也需要注意一下。

/* 使用CSS3进行动画设置 */
/* 设置动画效果的元素 */
.element {
width: 100px;
height: 100px;
position: relative;
background: red;
animation: move 2s infinite;
}
/* 设置动画具体的效果 */
@keyframes move {
0% {left: 0;}
50% {left: 500px;}
100% {left: 0;}
}

在上面的代码中，我们为了设置动画效果的元素，也就是那个红色的矩形，我们设置了一些基本的样式，如宽高、定位、背景颜色等。

接着，我们就使用@keyframes关键字来设置这个动画具体的效果，这里我们设置了3个关键帧，分别为0%、50%和100%。

在这3个关键帧中我们分别设置元素的位置，我们设置元素从开始状态向右移动，中间的位置在500px处，最终元素返回到开始的位置。

最后，我们就使用animation属性来指定这个动画效果，参数中的move就是我们设置的动画的名称，2s则是动画的时间长度，infinite则表示动画将无限循环播放。