纯css实现微信开红包动画

<style>
    .box-out {
        border: 3px solid black;
        width: 80px;
        height: 100px;
        margin: 100px auto;
        position: relative;
        border-radius: 10px;
    }

    .inner,
    .inner2 {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 80px;
        height: 100px;
        border-radius: 6px;
        backface-visibility: hidden;
        /* 不面对屏幕时不可见 */
    }

    .inner {
        background-color: red;
    }

    .inner2 {
        background-color: blue;
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
    }

    .box-out.move {
        animation: 3s move infinite;
        transform-style: preserve-3d;
    }

    @keyframes move {
        0% {
            　　transform: rotateY(0deg);
            　 -webkit-transform: rotateY(0deg);
        }
        100% {
            transform: rotateY(360deg);
            -webkit-transform: rotateY(360deg);
        }
    }
</style>

<div class="box-out">
     <div class="inner"></div>
         <div class="inner2"></div>
    </div>

<script>
    var inner = document.getElementsByClassName('box-out')[0];
    inner.addEventListener('click', () => {
        inner.classList.add('move')
    })
</script>