HTML 使用JS 、CSS原生Animation API实现锚点链接动画切换

最新推荐文章于 2024-09-11 09:44:36 发布

原创

最新推荐文章于 2024-09-11 09:44:36 发布 · 879 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #css #css3 #javascript

本文介绍了如何在HTML中利用JavaScript的原生Animation API来创建锚点链接的动画切换效果，而非依赖jQuery。作者分享了一个简单的demo，并指出尚待完善的地方，如如何确保界面切换的连贯性。

HTML 使用JS 原生Animation API实现锚点链接动画切换

查询资料发现大部分文章使用jquery来实现动画效果，由于限制无法实现，尝试原API方式实现动画切换效果，当前demo如下，仅抛砖引玉（待完成如何使两个界面切换能够连贯起来待尝试中）
更多信息可参考一下文章
Web Animations
https://drafts.csswg.org/web-animations/#animations

<!DOCTYPE html>
<html>
<head>
<style> 
.wolfplain
{   
    width:200px;
    height:50px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /*Safari and Chrome  infinite*/
}

@keyframes mymove
{
    from {left:0px;}
    to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
    from {left:0px;}
    to {left:200px;}
}
</style>
</head>
<body>
<p class="note"><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>
<div class="wolfplain">Animation Demo</div>
&