CSS animation动画问题

Question

想要做一个选项卡依次划出的动态效果。
选项卡部分的HTML是JS动态生成的

    function changeListWrap(index) {
        var info = obj[index].info;
        var strList = "";
        var delay = 0;
        for (var _index in info){
            delay += 2;
            strList += "<div class=\"file\" style=\"animation-delay:" + (delay/10) + "s\">";
            strList += "<div class=\"des-wrap\" onclick=''>";
            strList += "<p class=\"version\">" + info[_index].version + "</p>";
            strList += "<p class=\"title\">" + info[_index].name + "</p>";
            strList += "<p class=\"date\">" + info[_index].created_at + "</p>";
            strList += "</div>";
            strList += "<a class=\"download\" href=\"" + info[_index].url + "\"></a>";
            strList += "</div>";
        }
        $("#add-list").html(strList);
        $(".file").addClass("action");
    }

加入的action class是划入特效

.action {
    animation: filedraw 1s;
}
@keyframes filedraw {
    from {left: -200px; opacity: 0;}
    to {left: 0; opacity: 100%;}
}

但是目前很尴尬，animation是有效果的，但是它出晚了。。。选项卡是先出现之后再运行的效果。。。
目前是这个样子
http://o9mrx3p1u.bkt.clouddn....

现在改了一下CSS

        .file {
            position: relative;
            left: -200px; opacity: 0；
        }
        .action {
            animation: filedraw 1s;
        }
        @keyframes filedraw {
            //from {}
            to {left: 0; opacity: 100%;}
        }

结果是选项卡不显示了

__
继续换一种方法，用forwards挺住，并且默认是不显示的，加了action类在显示

        .file {
            position: relative;
            display: none;
        ｝
        .action {
            display: block;
            animation: filedraw 1s;
            animation-fill-mode: forwards;
        }
        @keyframes filedraw {
            from {left: -200px; opacity: 0;}
            to {left: 0; opacity: 100%;}
        }

依然老样子。。。

Answer 1

把from里的样式直接加到元素上（可以用一个单独的类），动画里直接留个to就行了。

---

试试写成animation: filedraw 1s forwards;，让它停住。

---

你这怎么还越写越迷了呢？display是干嘛的？动画属性为什么要单独加类？（这又不是过渡）
（另外我刚看到，opacity直接写1就行了为什么要用百分比。。）
优化要在能跑通的前提下做，否则就是在给自己挖坑。

---

js：

$tmpl=$('<div class="file">
            <div class="des-wrap">
                <p class="version"></p>
                <p class="title"></p>
                <p class="date"></p>
            </div>
            <a class="download" href=""></a>
        </div>');

function changeListWrap(index) {
    var info     = obj[index].info,
        fileList = [], 
        delay    = 0;
        
    $.each(info, function(i){
        var _ver = info[i].version,
            _nam = info[i].name,
            _dat = info[i].created_at,
            _url = info[i].url;
            
        var clone = $tmpl.clone()
                        .children('.version').text(_ver).end()
                        .children('.title').text(_nam).end()
                        .children('.date').text(_dat).end()
                        .children('.file').style({
                            'transition-delay': delay;
                        }).end()
                        .children('.download').attr('href', _url).end();
        fileList.push(clone);
        delay += 0.3;
    });
    $('#add-list').append(fileList).children('.file').addClass('active');
}

CSS：

.file {
    position: relative;
    left: -200px;
    opacity: 0;
    transition: all 1s;
｝
.active {
    left: 0;
    opacity: 1;
}