Question

我试图用CSS3制作两个动画。

第一个动画完成后，如何制作第二个动画？我也会尝试使用手写笔，但关键帧总是出错。

我的代码是： http://codepen.io/Luiggi/pen/IenGu

谢谢，Luiggi

Answer 1

这是你需要做的：

您必须在动画的不同阶段指定要更改的属性：

@keyframes luiggi {
    0% { height: 0%; width: 0.09%; left: 50%;}
    50% { height: 100%; width: 0.09%; left: 50%;}
    100% { height: 100%; width: 100%; left: 0%; }
}

更新笔here

Answer 2

感谢@aelor，但我找到了解决方案。

你必须创建2个@keyframes然后，你必须像这样编写css规则

.escenario {
    background-color: #f00;
    width: 0.09%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    -o-transition: 2s all;
    -ms-transition: 2s all;
    -moz-transition: 2s all;
    -webkit-transition: 2s all;
    transition: 2s all;
    -o-animation: luiggi 2s, locura 2s 2s 1;
    -ms-animation: luiggi 2s, locura 2s 2s 1;
    -moz-animation: luiggi 2s, locura 2s 2s 1;
    -webkit-animation: luiggi 2s, locura 2s 2s 1;
    animation: luiggi 2s, locura 2s 2s 1
}

在动画中，编写第一个动画，逗号和第二个动画

完成第一个动画时的动画

2 个答案: