CSS帧动画简便实现

本文根据慕课网课程总结而成

JS+CSS3实现“粽情端午

1.获取DOM对象

var g =function(id){
        return document.getElementById(id);
    }

此后给元素设id如：

<div class="c_zongzi" id="c_zongzi"></div>

2.时间轴对象构造器

    var TimeLine = function(){
        this.order = [];//动画序列
        this.add= function(timeout,func,log){
            this.order.push({
                timeout:timeout,
                func:func,
                log:log
            })
        }
        this.start = function(ff){
            for(s in this.order){
                (function(me){
                    var fn=me.func;
                    var timeout=me.timeout;
                    var log =me.log;
                    Timeout = Math.max(timeout-ff,0);

                    setTimeout(fn,timeout);
                    setTimeout(function(){
                        console.log('time->',timeout,'log->',log);
                    })
                })(this.order[s]);
            }
        }
    }

初始化场景

    var s1 = new TimeLine();

3.设定的class制作动画

通过变换时间来控制帧动画

s1.add(1,function(){
        g('c_zongzi_box').className='c_zongzi_box';
        g('text').className='text text_in';
    })
    
s1.add(100,function(){
        //变换类名
    })
    
s2.add(3000,function(){
        s3.start();
        //第3秒时s3场景启动
    })
    
s3.add(5000,function(){
       s3.start();
       //循环s3场景
    });  

4.预加载图片

    var imgs=['img/zzr_2.png','img/zzr_3.png','img/zzr_4.png'];
    var imgs_onload = function(){
        imgs.pop();
        //删除最后的元素并返回
        //即先加载后面的图片
        if(imgs.length == 0){
            s1.start()
        //加载完成后开始动画    
        }
    }
    for(s in imgs){
        var img=new Image;
        img.onload = imgs_onload;
        img.src= imgs[s];
    }

5.轻度元素抖动

@keyframes rock{
        0%{transform:rorate(0deg)}
        10%{transfrom:rorate(3deg)}
        20%{transform:rorate(-3deg)}
        30%{transform:rotate(2deg)}
        40%{transform:rotate(-2deg)}
        50%{transform:rotate(1deg)}
        60%{transform:rotate(-1deg)}
        70%{transform:rotate(0deg)}
        100%{transform:rotate(0deg)}
}