css3动画@keyframes示例

         .active {
            animation: chuiziza 0.5s ease 1 forwards;
        }
        .feijindan {
            display: block;
            animation: fei 2s ease 1 forwards;
        }
        @keyframes fei {
            0% {
                transform: scale(0);
            }

            100% {
                transform: scale(1);
                top: 50%;
                right: 50%;
                margin-right: -301px;
                margin-top: -301px;
            }
        }
        @keyframes chuiziza {
            20% {
                transform: rotate(30deg);
                transform-origin: right bottom;
            }

            50% {
                transform: rotate(0deg);
            }

            60% {
                transform: rotate(20deg);
            }

            100% {
                transform: rotate(0deg);
            }
        }

来源：https://www.cnblogs.com/chenluqing/p/11429551.html