css 动画

算法

从排序数组中删除重复项

    var removeDuplicates = function(nums) {
        var i = 1;
        while(i < nums.length){
            if(nums[i-1] === nums[i]){
                nums.splice(i, 1);
            }else{
                i++;
            }
        }
        return nums.length
    };

买卖股票的最佳时机

给定一个数组，它的第 i 个元素是一支给定股票第 i 天的价格。

设计一个算法来计算你所能获取的最大利润

    var maxProfit = function(prices) {
        var total = 0;
        var min = prices[0];
        for(var i=1; i<prices.length; i++){
            if(prices[i] < prices[i-1]){
                total += prices[i-1] - min;
                min = prices[i];
            }
            if(i === prices.length - 1){
                total += prices[i] - min;
            }
        }
        return total
    };

动画

早期动画是通过 setInterval 或者 setTimeout 来修改对应的 css 属相来做动画，这样做的动画偶尔会出现跳帧，动画复杂了之后也会卡顿，主要是性能的瓶颈。

后来有了 requestAnimate 方法，允许在每一帧的空闲时间里调用，还是用 js 去调用 CSSOM 的 API 来做动画。

后来 css 有了两个属性：transition 和 animation 来控制动画，我们经常说这两个属性会启动 GPU 加速来调用性能更高的动画。

GPU 加速

以 translate 为例，使用 translate3D 其实是将当前 DOM 层级提高到最上层，使得这个 DOM 的重排都不会影响其他 DOM 的布局，减少重排影响提高重绘

不关注重排之后，只关注重绘。此时就可以用 GPU 单纯来绘制页面，所以加速的并不是说 GPU 本身。而是避免了重排了之后整体绘制性能增强了。

transition

过渡动画：我们把动画如果分成简单的两个状态，起始状态和终止状态，从起始状态平滑的变成终止状态的过程就是动画。transition 就是完成这个平滑过渡的动画

    /* 示例 */
    transition: property duration timing-function delay;
     
    classA {
        width: 100px;
        transition: width 2s;    
    }
    
    classB {
        width: 200px;
    }

上面这个简单的动画就是两个状态，使用过渡动画将两个状态进行平滑过渡。可以说 transition 是面向结果的，就是两个状态，不能控制动画过程中的变化。

animation

那如果我们期望控制动画过程怎么做呢。使用 animation，animation 会将动画分成 0-100%(或者 from to, from = 0，to = 100%) 这么多帧。

@keyframes

要使用动画之前，首先需要定义动画。将整个动画分成多个动画帧。然后对每个动画帧的状态进行定义。

    @keyframes rainbow {
        0% { background: #c00 }
        50% { background: orange }
        100% { background: yellowgreen }
    }
    
    @keyframes rainbow {
        from { background: #c00 }
        50% { background: orange }
        to { background: yellowgreen }
    }

上面是定义了一个动画 rainbow，两种定义的方法效果是一样的。

animation

    animation: name duration timing-function delay iteration-count direction;
    
    animation: rainbow 1s linear 3s 3 normal;

这是使用动画的方式。动画会根据定义的 keyframes 定义的动画那一帧的状态进行设定。