html 瞄点跳转动画效果

html css3 锚点动画向上

https://www.cnblogs.com/yutaoyao/p/4225771.html

原作者一条大鱼写的， 纯css3 效果，效果是直接跳转到瞄点的位置， 然后进行瞄点div或table 用动画效果慢慢从下面上升到瞄点位置。

我把多余的内容去掉， 只保留最必要的css3 样式，如果位置不变的话，是没有动画效果的。

        <style type="text/css">
            @-webkit-keyframes slideupin {
                0% {-webkit-transform: translateY(100%);}
                100% { -webkit-transform: translateY(0%);}
            }
            @keyframes slideupin {
                0% {transform: translateY(100%); }
                100% { transform: translateY(0%);}
            }
            
            :target {
                -webkit-transform: translateY(0%);
                transform: translateY(0%);
                -webkit-animation: slideupin .35s .05s linear forwards;
                animation: slideupin .35s .05s linear forwards;
            }
            
        </style>

@-webkit-keyframes 对应谷歌chrome 浏览器

@keyframes 对应IE10 等的浏览器

:target 就是瞄点对象了

如果是cshtml 有razor 语法的，用@@-webkit-keyframes 和 @@keyframes 就ok 了。