css动画/过渡 部分学习要点

1.animation:闪光的书

 .book {
        animation: booklight 1.5s infinite linear;//infinite表示一直循环播放动画
        @keyframes booklight {//自定义名字为booklight
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
    }

2.transition:过渡效果

 .fadein-enter-active,
    .fadein-leave-active {//过渡变换条件
        transition: all 2s ease;
    }
    .fadein-enter,
    .fadein-leave-active {//开始前状态、结束状态
        opacity: 0;
        transform: translate(0.2rem, 1rem);
    }