你用的那些CSS转场动画可以换一换了

传统转场动画就是滑来滑去，淡入淡出这些。时代在召唤，技术在发展，可以试一试使用一些新的转场动画了。此文乃张鑫旭大神出品，必属精品，值得一读。
链接地址：https://www.zhangxinxu.com/wordpress/2019/05/css-transfer-animation/

文章总结了几种css特效及适用场景。附有完整代码，实现原理，实现效果等说明，内容详细。

带圆角的五角星扩展

    mask: url(./star.svg) no-repeat center;
    mask-size: 300% 300%;    /* Safari没有这个类似“初始化”的东西居然无效 */
    animation: maskStarIn 1s both;
}
@keyframes maskStarIn {
    from { mask-size: 0 0; }
    to   { mask-size: 300% 300%; }
}

爱心放大过场动画

    mask: url(./heart.svg) no-repeat center;
    mask-size: 200% 300%;    /* Safari没有这个类似“初始化”的东西居然无效 */
    animation: maskHeartIn 1s both;
}
@keyframes maskHeartIn {
    from { mask-size: 0 0; }
    to   { mask-size: 200% 300%; }
}

圆点百花齐放效果

    mask: radial-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    mask-size: 40px 40px;
    animation: seed 1s;
}
@keyframes seed {
    0%{--seed:0}1%{--seed:1}2%{--seed:2}3%{--seed:3}...98%{--seed:98}99%{--seed:99}100%{--seed:100}
}

三角斜切效果

    mask: linear-gradient(135deg, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    mask-size: 40px 40px;
    animation: seed .6s;
}
@keyframes seed {
    0%{--seed:0}1%{--seed:1}2%{--seed:2}...99%{--seed:99}100%{--seed:100}
}

百叶窗效果

    mask: linear-gradient(to right, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    mask-size: 20px;
    animation: seed .6s;
}
@keyframes seed {
    0%{--seed:0}1%{--seed:1}2%{--seed:2}...99%{--seed:99}100%{--seed:100}
}

车轮转动效果

    mask: conic-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    mask-size: 40px 40px;
    animation: seed .6s;
}
@keyframes seed {
    0%{--seed:0}1%{--seed:1}2%{--seed:2}...99%{--seed:99}100%{--seed:100}
}

滤镜与转场动效

    animation: brightnessIn .6s;
}
@keyframes brightnessIn {
    0%   { filter: brightness(5); }
    100% { filter: brightness(1); }    
}