今天在制作首页导航图特效demo时，无意发现一个奇怪的交互现象，故记录

经测试，简化了触发该现象的代码，如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        @keyframes move_top{
            0%{ top: 350px; }
            100%{ top: 0; }
        }
        *{
            margin: 0;
            padding: 0;
        }
        html{
            /*去除滚动条*/
            overflow: hidden;
        }
        div{
            width: 100%;
            height: 100%;
            position: absolute;
            background: #000;
            z-index: -1;
        }
        a{
            display: block;
            width: 100px;
            height: 100px;
            background: #acf;
        }
        #moveBox:target{
            /*使用动画*/
            animation: move_top 1s 1;
        }
    </style>
</head>
<body>
    <div id="moveBox"></div>
    <a href="#moveBox"></a>
</body>
</html>

在点击a标签后，moveBox并未如预期所想从距顶部350px位置到距顶部0px位置，而是a标签从屏幕上方进入屏幕。

去除html的overflow属性后，可发现当点击a标签时，页面出现一个滚动条，同时滚动条的可滚动长度在不断的缩小，同时a标签从上方进入可视区域。

把animation的循环次数从1改成大于1时，从第二次动画开始，动画效果符合预期。

修改moveBox的position属性的值为fixed可不触发该现象。

关于:target与定位动画的奇怪现象的更多相关文章

  1. 【奇怪现象】用联通访问某些ASP.NET网站会产生__EVENTVALIDATION字段，用电信却只有：__VIEWSTATE。【正常】？原因？

    [奇怪现象]用联通访问某些ASP.NET网站会产生__EVENTVALIDATION字段,用电信却只有:__VIEWSTATE.[正常]?原因? 对于__VIEWSTATE和__EVENTVALIDA ...

  2. 同时对view延时执行两个动画时候的现象

    同时对view延时执行两个动画时候的现象 对于view延时执行了两个动画后,会将第一个动画效果终止了,直接在第一个动画的view的最后的状态上接执行后续的动画效果,也就是说,我们可以利用这个特性来写分 ...

  3. 发现个delphi调用vc写的Dll中包括pchar參数报错奇怪现象

    发现个delphi调用vc写的Dll中包括pchar參数奇怪现象 procedure中的第一行语句不能直接调用DLL的函数,否则会执行报错,在之前随意加上条语句就不报错了奇怪! vc的DLL源代码地址 ...

  4. for循环产生的Cortex-M3汇编代码的一个奇怪现象

    最近比较一下KEIL和IAR两个编译器产生的代码,基于Cortex-M3处理器的,然后发现了一几个奇怪的地方. 很简单的一个C的for循环 void fun_for_add_65535(void) { ...

  5. PHP 浮点型转整型的一个奇怪现象

    起因 最近通过一个学长的题了解php弱类型的时候,发现了一个奇怪的现象. 正文 主要问题在这样一段代码: $c=(int)((0.1+$b)*10); 当$b=0.6,0.8以及其他值的时候都正常 将 ...

  6. CSS Float浮动所带来的奇怪现象

    先抛个例子出来 运行下面的例子后,可以看到输出内容如下. <!DOCTYPE html> <html lang="en"> <head> < ...

  7. SAP MM 并非奇怪现象之MB5B报表查不到某一笔出库记录？

    物料号:1301002696 工厂代码:2160 MB5B,如下查询条件, 查询结果中,期初与期末库存数量都是0,期间的出库入库数量都是0.事实上该物料期初应该是有库存的.并且我用MB51相同时间段查 ...

  8. zookeeper集群安装的奇怪现象

    zookeeper:配置的集群信息是domain:端口2888:端口3888:  domain为内网静态ip:每次启动都不能相互连接报错误: [myid:3] - WARN  [WorkerSende ...

  9. cygwin下调用make出现的奇怪现象

    <lenovo@root 11:48:03> /cygdrive/d/liuhang/GitHub/rpi_linux/linux$make help 1 [main] make 4472 ...

随机推荐

  1. PHP学习笔记 02 之文件上传

    我们了解了表单传值后,这些我就可以完成PHP的文件上传了.我们了解PHP文件上传前,先了解PHP文件上传的原理. 一.PHP上传文件原理 第一步:将本地的文件通过form表单上传到服务器的临时目录中, ...

  2. ASP.NET Core Web API 集成测试中使用 Bearer Token

    在 ASP.NET Core Web API 集成测试一文中, 我介绍了ASP.NET Core Web API的集成测试. 在那里我使用了测试专用的Startup类, 里面的配置和开发时有一些区别, ...

  3. 使用描述符实现property功能

    # Author : Kelvin # Date : 2019/1/25 14:46 class Decproperty: def __init__(self, func): self.func = ...

  4. Vue.js-02：第二章 - 常见的指令的使用

    一.前言 在上一章中,我们了解了一些在使用 Vue 进行开发中经常会遇到的基础概念,与传统的前端开发不同,Vue 可以使我们不必再使用 JavaScript 去操作 DOM 元素(还是可以用,但是极度 ...

  5. spring里的三大拦截器

    Filter 新建 TimeFilter @Component public class TimeFilter implements Filter { @Override public void in ...

  6. 学习ASP.NET Core Razor 编程系列十四——文件上传功能（二）

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  7. 微信公众号开发C#系列-2、微信公众平台接入指南

    概述 微信公众平台消息接口的工作原理大概可以这样理解:从用户端到公众号端一个流程是这样的,用户发送消息到微信服务器,微信服务器将接收到的消息post到用户接入时填写的url中,在url处理程序中,首先 ...

  8. 从PRISM开始学WPF（番外）共享上下文 RegionContext-更新至Prism7.1

    RegionContext共享上下文 There are a lot of scenarios where you might want to share contextual information ...

  9. 浅谈基于Linux的Redis环境搭建

    本篇文章主要讲解基于Linux环境的Redis服务搭建,Redis服务配置.客户端访问和防火强配置等技术,适合具有一定Linux基础和Redis基础的读者阅读. 一  Redis服务搭建 1.在根路径 ...

  10. 四种途径提高RabbitMQ传输消息数据的可靠性（一）

    前言 RabbitMQ虽然有对队列及消息等的一些持久化设置,但其实光光只是这一个是不能够保障数据的可靠性的,下面我们提出这样的质疑: (1)RabbitMQ生产者是不知道自己发布的消息是否已经正确达到 ...