css3 来回移动动画

CSS3可以添加很多不同种类的动画效果来丰富网页设计，其中之一就是来回移动动画。

要创建这样一个动画效果，需要做以下几步：

/* 第一步：定义元素的起始状态 */.move {
    position: relative;
    left: 0;
     /* 元素默认在原位置 */animation-duration: 2s;
     /* 动画执行时间2秒 */animation-name: move;
     /* 指定动画名称，与后面的keyframes配合 */animation-iteration-count: infinite;
     /* 动画无限循环 */animation-direction: alternate;
 /* 指定动画方向为来回移动 */}
/* 第二步：定义元素的动画效果 */@keyframes move {
0% {
    left: 0;
 /* 元素起始位置：左侧 */}
100% {
    left: 200px;
 /* 元素结束位置：右侧200像素处 */}
}
    

这样，一个来回移动的动画效果就完成了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！