CSS animation 动画执行结束保留结束状态

楚木巽

关注

阅读 55

2021-09-28

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

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

精彩评论(0)

0 0 举报