css3中animation可以同时加载2个动画吗？

Question

请问如何给一个div加载2个动画用css3

Answer 1

<img src="1.png" class="a1" />

第一一秒的透明度动画，第二是延迟一秒的一秒循环位移动画

    .a1 {

        animation: a1 1s,a2 1s infinite 1s;

    }

    

    @keyframes a1 {

        0% {

            opacity: 0;

        }

        100% {

            opacity: 1;

        }

    }

    

    @keyframes a2 {

        0% {

            transform: translateY(0);

        }

        50% {

            transform: translateY(-20%);

        }

        100% {

            transform: translateY(0);

        }

    }