如何在 css 动画末尾使用 display:none

2024-04-03

我想在关键帧动画的末尾添加一个 display:none 属性。就像这样:

.sw_intro{
    animation: introtop;
    animation-duration: 0.8s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

@keyframes introtop {
    0% {margin-top: 0;display: block;}
    100%{display: none;margin-top: 100vh;}
}

但 display:none-property 没有被使用。我认为这不是我的“代码”的错误,而是不允许/可行的错误。虽然我希望在动画结束时具有这种效果,并且它必须类似于 display:none 效果,而不是 opacity:0;

我怎样才能做到/实现这一目标?用jquery代替?

Thanks!


display不是适用于动画的属性。相反,您可以更改尺寸(height or width) to 0并设置overflow:hidden;到元素。这样,该元素实际上应该从页面中消失。

.sw_intro{
    display:block;
    overflow:hidden;
    animation: introtop;
    animation-duration: 0.8s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

@keyframes introtop {
    0% {margin-top: 0; width:inherit; height:inherit;}
    100%{margin-top: 100vh; width:0; height:0;}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 css 动画末尾使用 display:none 的相关文章

  • 在弹出警报框之前将其删除[重复]

    这个问题在这里已经有答案了 我正在尝试使用 Grease Monkey 和 jQuery 删除外部站点上的警报框 HTML p Hello world p GreaseMonkey 脚本 目前没有 jQuery 部分 UserScript
  • 触摸滚动 Jquery 插件 - 如何为多个实例使用不同选项进行初始化?

    正如这里所发现的 https github com neave touch scroll https github com neave touch scroll function Define default scroll settings
  • 使用 JQuery 定义要附加的 HTML 模板

    我有一个正在循环的数组 每次条件成立时 我想附加一份副本HTML下面的代码到具有一些值的容器元素 我可以在哪里放置此 HTML 以以智能方式重复使用 a href class list group item div class image
  • Jquery查找值为X的表格单元格

    我正在尝试寻找一个 td 其中值为 5 它是一个日历 因此只有一个 5 值 您可以使用filter https api jquery com filter method td filter function return this text
  • 获取点击元素的 HTML 内容 jQuery

    我有以下 HTML
  • 单击按钮重复动画

    我想每次单击按钮时都重复动画 我尝试做某事像这样 https jsfiddle net 91raod7e const dist document querySelector dist document querySelector butto
  • SwiftUI 动画滑入和滑出

    我有一个视图将显示在另一个视图上 视图动画完美地从右侧滑入 但是当我单击 关闭 按钮时 视图消失 而没有在消失之前滑回右侧的所需动画 我尝试过使用 opacity self isShowing 1 0 但随后视图淡入和淡出 我需要它滑入和滑
  • 匹配数组中的对象并合并

    UPDATE 我有一个名为的对象数组cars包含 li 标签 其中包含有关汽车的属性数据 例如价格 汽车类型等 我的目标是 如果这些汽车符合某些标准 则将它们合并到一个列表中 要求 快速性能 保持相同的汽车数组结构 Main Goal Ma
  • overridePendingTransition 显示第二个活动的速度太快

    我有 2 个活动 我想在两个活动之间创建一个动画过渡 以便两个活动的视图向上滑动 就好像第二个活动正在向上推动第一个活动一样 在我的第一个活动中我使用 Intent iSecondActivity new Intent FirstActiv
  • 在导航栏下方添加背景图片

    我想在导航栏下方添加背景图像 具有完整窗口大小的宽度 它不应覆盖整个页面长度 而是从导航栏菜单下方开始 一直向下直到特定的指定高度 但宽度是满的 我参考了以下内容 但仍然没有结果 在 Twitter Bootstrap 中的导航栏下方启动背
  • 有 CSS 父选择器吗?

    我该如何选择 li 元素是锚元素的直接父元素 举个例子 我的 CSS 应该是这样的 li lt a active property value 显然 有多种方法可以使用 JavaScript 实现此目的 但我希望 CSS Level 2 本
  • React JS - 单击时更改颜色并将默认颜色放在所有其他颜色上

    我有 x 个渲染数文章预览依赖于 API 调用的组件 div div Object keys images map index i gt return div div
  • 防止jsTree节点选择

    我正在使用 jsTree 插件列出文件系统中的文件夹 我需要防止用户在满足特定条件之前更改到另一个节点 下面的代码不会停止传播 我看到了一些使用其他插件的解决方案 但这是一个简单的任务 没有其他插件它一定是可能的 jstree on sel
  • 使用 jQuery 检查输入是否为空

    我有一个表单 我希望填写所有字段 如果单击某个字段然后未填写 我想显示红色背景 这是我的代码 apply form input blur function if input text is empty this parents p addC
  • jQuery id 选择器在有 .在 ID 中[重复]

    这个问题在这里已经有答案了 我的html代码如下 div class chatbox html markup which is validated div 在上面的代码中dipesh parmardiv 动态添加 我正在使用以下代码访问它
  • javascript中输入类型时间的值

    我有这个html
  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式
  • 如何使用JQuery和Django(ajax + HttpResponse)?

    假设我有一个 AJAX 函数 function callpage ajax method get url abc data x 3 beforeSend function success function html IF HTTPRESPO
  • 为什么我的图像下方有空间? [复制]

    这个问题在这里已经有答案了 图像在下面获得了神秘的空白空间 即使padding 0 margin 0被应用 示范 http jsfiddle net cLETP 红色边框应该包围图像 但底部有空间 造成这种情况的原因是什么 如何删除该空间
  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red

随机推荐

  • Flutter - 删除滑块中的默认填充

    我想知道如何删除默认填充Flutter Slider 电流输出是这样的 默认填充滑块的形状清晰可见 这是我的代码 Positioned child Align alignment Alignment bottomLeft child Sli
  • PyCharm 5 找不到 Django 1.9 模板

    当我使用 PyCharm 5 0 3 调试我的应用程序时 我想在模板文件 Django 1 9 中插入一些断点 但是 当我在 PyCharm 调试模式下运行应用程序时 它会在处理第一个请求后立即打印以下警告 警告 模板路径不可用 请在 se
  • Linq:存储为文本时按日期排序

    我需要按日期排序 但日期以文本形式存储在数据库中 我正在使用 Linq to 实体来执行查询 根据数据库的设计方式 将该列更改为日期列是不可行的 因为该列中有许多不同的数据类型 有一个名为的鉴别器列type所以我会知道特定行是什么类型 您可
  • 使用WebSocket上传大文件

    我正在尝试使用 WebSocket API 上传大文件 至少 500MB 最好达到几 GB 问题是我不知道如何编写 发送文件的这一部分 释放所使用的资源 然后重复 我希望我可以避免使用 Flash Silverlight 之类的东西 目前
  • 在新列中获取具有相似地址的 id

    我有一个数据帧 我从中处理一些列 以获取每个客户 ID 的地址与每个其他客户 ID 的地址的匹配百分比 如果某些地址与其他地址的匹配百分比高于 80 那么我想在新列中收集其相应的客户 ID 我编写了代码 在其中获取元组列表 其中每个元组中都
  • $root 和 $parent 有什么区别?

    我正在学习 KnockoutJS 但我不明白两者之间的区别 root and parent用法 请参见这个jsfiddle http jsfiddle net supercool 2gt4K 27 或下面的代码 div data Value
  • 在家学习共享点[关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 有没有可以安装并用于家庭学习目的的 sharepoint 家庭 版本 Thanks Microsoft 预配置的 Sharepoint 2007 安装
  • 模拟实体框架核心上下文

    我尝试测试我的应用程序 因此我需要模拟我的 EF 上下文 我的代码似乎没问题 但有以下异常 System ArgumentNullException 值不能为空 参数名称 来源 这是我的测试方法 var options new DbCont
  • python re.sub,仅替换部分匹配[重复]

    这个问题在这里已经有答案了 我对 python 很陌生 我需要通过一个正则表达式匹配所有情况并进行替换 这是一个示例子字符串 gt 期望的结果
  • 如何将内存中的multer文件缓冲区上传到google云存储桶?

    我使用 multer 和 nodejs 来处理多部分表单数据 我不想保存从客户端获得的 req file 我想直接将内存中的文件缓冲区上传到谷歌云存储 但是存储桶 firebase storage 的上传方法只需要一个文件路径作为参数 有什
  • SQL 查询至少其中一项

    我有一群用户 每个用户都有很多帖子 架构 Users id Posts user id rating 如何找到至少有一篇帖子评级高于 例如 10 的所有用户 我不确定是否应该为此使用子查询 或者是否有更简单的方法 Thanks 要查找至少有
  • 我可以让 SQLAlchemy 根据当前外键值填充关系吗?

    这是一些代码 latest version at https gist github com nickretallack 11059102 from sqlalchemy ext declarative import declarative
  • “jQuery 方式”仅用 HTML 和文本的混合替换文本节点?

    在我的 Web 浏览器用户脚本项目中 我只需要替换一个文本节点 而不影响与文本位于同一父节点下的其他 HTML 元素 我需要用多个节点替换它 div foo bar baz img src image png div 需要成为 div a
  • Github Mac 权限问题

    作为新的 Git 用户 我正在使用最新的 Mac 版 Github 当我尝试同步存储库 我首先克隆 然后创建一个新分支 提交更改 然后与 master 合并 时 我收到错误 Authentication Failed You may not
  • 浏览器不会通过 onclick 事件设置 cookie

    尽管我确信这是显而易见的事情 但我还是对这个错误感到恼火 如果是的话 抱歉 以下 JavaScript 成功设置了我的 cookie 但是一旦我将相同的代码绑定到onclick事件 就像这样
  • 这个递归同步调用如何不死锁?

    我有一组方法 它们全部同步到类对象 不能使用 self 因为可以在多个线程中使用该对象的多个实例 其中一些方法调用类中也在类对象上同步的其他方法 不知怎的 这有效并且不会导致我期望的僵局 我假设 testA 将被阻止运行 因为 testB
  • if (设备 == iPad), if (设备 == iPhone)

    所以我有一个通用应用程序 我正在设置一个内容的大小UIScrollView 显然 iPhone 和 iPad 上的内容大小会有所不同 如何为 iPad 设置特定尺寸 为 iPhone 和 iPod touch 设置另一个尺寸 if UI U
  • 解析 SQL 语句的库

    我希望能够解析任意 SQL SELECT 语句并检索各个组成部分 列 关系 JOIN 条件 WHERE 条件 ORDER BY 列 最好使用 Delphi 快速谷歌搜索显示了几种不同的免费软件产品 但尚不清楚它们是否完整和 或正在积极开发中
  • 纬度值无效:必须介于 -90 到 90 之间

    我尝试在我的phonegap应用程序中通过javascript Azure Map创建地图 但出现以下错误 atlas min js api version 1 0 362 未捕获 承诺 错误 无效的 LngLat 纬度值 必须介于 90
  • 如何在 css 动画末尾使用 display:none

    我想在关键帧动画的末尾添加一个 display none 属性 就像这样 sw intro animation introtop animation duration 0 8s animation delay 2s animation fi