实例：一个箭头默认向下，点击展开之后箭头向上

animation: rotate .25s linear 1 alternate forwards;

意思为 name、时间、动画的速度曲线、动画执行次数、如何循环、动画之前或之后的效果

    /* 显示的时候动画效果 */
    .animation {
        animation: rotate .25s linear 1 alternate forwards;
    }
 /*隐藏时候动画效果 */
    .animation1 {
        animation: rotate1 .25s linear 1 alternate forwards;
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(180deg);
        }
    }
    @keyframes rotate1 {
        0% {
            transform: rotate(180deg);
            
        }
        100% {
            transform: rotate(0deg);
        }
    }