css3动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

css动画实现的步骤

1.定义一个动画

 @keyframes  动画名 {
         0%{
              //移动属性，样式变化
          }
          100%{
              //移动属性，样式变化
           }
}

2.使用动画

哪个盒子{
        animation-name:动画名      //确定应用的是哪一个动画
        animation-duration: 时间      // 动画持续的时间
        animation-timing-function: 速度     //动画的速度曲线
        animation-direction:方向      //动画是否在下一周期逆向地播放
        animation-delay:时间        //动画推迟多久开始
}

案例 ：天空之城

全球航拍爱好者和专业摄影师的作品社区 | 天空之城 (skypixel.com)
天空之城的图片长廊横向移动就是应用了css动画效果，具体代码如下

//1.定义一个动画
@keyframes move{
            100%{
                    transform:translate(-50%,0,0)     //向左移动自身宽度的50%
            }
}
//2.使用动画
承载长廊图片的元素{
        animation-name:move;      //确定应用的是哪一个动画
        animation-duration: 500s;      // 动画持续的时间
        animation-timing-function:linear;     //动画的速度曲线
        animation-direction:reverse      //动画是否在下一周期逆向地播放
        animation-delay:0.3s       //动画推迟多久开始
}

css3动画库

animate.css
Animate中文网 – Animate安装、Animate使用、Animate下载
使用步骤：官网上有详细说明