石乐志！CSS3动画animate爱你妹爱不动(⊙_⊙)

正在写CSS3动画，发现元素怎么都不动。
需求如下：让图片进行一个简单的循环位移。

动画需求.png

代码如下：

    /* 右上方气球 */
    .section1 .ball {
        right: 7%;
        top: 13%;
    }
    /* 气球漂浮动画 */
    .section1.animate .ball {
        transition: theBall 3s infinite;
    }
    @keyframes theBall {
        50%{
            transform: translate(0, -20px);
        }
    }

（样式不会像JS那样报错，F11居然没有红小叉，有点失落）
瞅了半天，终于发现语句问题：

@keyframes应配合animate语句使用！

transform才是transition的另一半。

更正后如下：

    /* 气球漂浮动画 */
    .section1.animate .ball {
        animation: theBall 3s infinite;
    }
    @keyframes theBall {
        50%{
            transform: translate(0, -20px);
        }
    }

实现效果：

动画实现.gif

动画基本语法见：H5与CSS3动画基础https://www.jianshu.com/p/4e78cafe9138

---

2018.1.11