登录
转载

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

发布于 2020-11-20 阅读 49
  • 前端
转载

传统转场动画就是滑来滑去,淡入淡出这些。时代在召唤,技术在发展,可以试一试使用一些新的转场动画了。此文乃张鑫旭大神出品,必属精品,值得一读。
链接地址: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); }    
}

评论区

sandwich
0粉丝

励志做一条安静的咸鱼,从此走上人生巅峰。

0

0

0