使用css在另一个元素动画之后设置元素动画

Question

如何使用css？

在另一个元素动画之后设置元素动画

我的代码是：

div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-timing-function:cubic-bezier(0.94,-0.53, 0.93,-0.44);
    animation-fill-mode: forwards;
     animation-direction: alternate;
}
h1{
    opacity:0;
    animation-name: ee;
    animation-duration: 20s;
    animation-fill-mode: forwards;
    color:red;
}
@keyframes example {
    from {width: 100px;}
    to {width: 400px;}
}
@keyframes ee{
    from {
        opacity: 0; 
        color: red;
    }
    to {
        opacity: 1; 
        color: black;
    }
}

:after属性可以帮助我吗？

我可以只使用css吗？