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

animation.gif

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);        }    }