如何在 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 的相关文章

  • jquery覆盖加载栏div

    所以我有一个数据表 并且我正在使用 ajax 获取数据 当检索数据时 表中的数据消失并出现一个小的加载圆圈 我希望数据保留 我知道如何做到这一点 并且加载圆圈出现在表格的中心 不一定是垂直的 至少是水平的 以及稍微透明的背景阻挡稍微超出表格
  • jQuery,如何制作同步动画?

    我的页面布局看起来像这样 image image image 当您将鼠标悬停在其中一张图像上时 我想制作一个动画以获得类似这样的效果 image hover image image or image image hover mage or
  • 当鼠标悬停在链接上时,如何在链接旁边创建弹出框?

    这是我想要实现的 我的网页上显示了两个超链接 a href http foo com foo a a href http bar com bar a 我还有两个对 div 链接的描述 div foo means foo div div ba
  • Jquery查找值为X的表格单元格

    我正在尝试寻找一个 td 其中值为 5 它是一个日历 因此只有一个 5 值 您可以使用filter https api jquery com filter method td filter function return this text
  • jQuery .append 不起作用

    我想在我的表单中插入一些东西 这些东西被硬编码到插件中 我不想弄乱插件文件 所以我发现 append 我写过类似的东西 据我所知它应该有效 Chrome 中的控制台没有显示任何错误 这是有什么问题吗 由于 wordpress 安全模式 我正
  • 使用 parsley.js 支持每个字段多个自定义错误消息

    我正在尝试使用 parsley js 验证一个简单的表单 并且我对 parsley js 非常初学者 我想使用 window ParsleyValidator addValidator 方法在一个自定义验证方法中显示多个错误消息 所以我尝试
  • Jquery 拖放和克隆

    嗨 我需要实现这个 我有一套可掉落的物品 基本上我是在服装上掉落设计 并且我正在掉落一个克隆 如果我不喜欢删除的对象 设计 我想通过执行隐藏之类的操作来删除它 但我无法做到这一点 请帮我 这是代码 var clone document re
  • 使用 bootstrap 将搜索图标放入文本框中

    我默认使用引导程序 文本框占据列的全宽 我想将搜索图标放在文本框的末尾 我的代码是这样的 div class container div class row div class form group col lg 4 div div div
  • 如何使用 css 在标题的两侧放置实线? [复制]

    这个问题在这里已经有答案了 可能的重复 如何在标题文本上制作字段集图例样式的 背景线 https stackoverflow com questions 5985009 how can i make a fieldset legend st
  • 如何仅使用CSS设置某个角的边框半径

    如上所示 我可以只给顶部部分而不给底部提供半径 或者有时给底部而不是顶部提供半径吗 有没有办法只给一个角提供边界半径 Like border radius top left top right bottom right bottom lef
  • javascript中输入类型时间的值

    我有这个html
  • jQuery 在 Chrome 下发现错误元素

    我使用 jQuery 迭代 HTML 表 并动态填充每行的行号 通过在文本框中填充行号 function updateRowNums myTable find tr each function index this find input i
  • Javascript 中的线性回归 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在网络浏览器中用 Javascript 进行最小二乘拟合 目前 用户使用 HTML 文本输入输入数
  • 使用本机 JavaScript 获取过渡中的 CSS 值

    这个问题之前被问过 但答案使用了 jQuery here https stackoverflow com q 8920934 3186555 因此 我将调整问题以专门询问native解决方案 to 最小化依赖关系 假设您有一个 div 然后
  • jQuery 检索和设置 html select 元素的选定选项值

    我正在尝试使用 jQuery 检索并设置选择元素 下拉列表 的选定值 为了检索我已经尝试过 myId find selected val 也 myId val 但两者都返回未定义 任何对此问题的见解将不胜感激 要获取 设置选择元素的实际 s
  • 自定义 WP 主题时,我应该将导航栏放在“”标签之前还是之后?

    我正在通过制作子主题来自定义 WP 主题 我将 Bootstrap 中的导航栏放入子主题目录中的 header php 文件中 但是 我不确定在哪里放置导航栏代码 我可以把它都放在前面and之后标记成功 例如 无论我选择哪一个 导航栏都显示
  • 限制 jQuery id 字符串吗?

    简而言之 我的问题是字符串在 jQuery 中作为可搜索 id 或可搜索内容有什么限制 更新 我得到了 ID 部分 但不是为什么我什至无法使用该字符串搜索 html 内容 对于任何愿意告诉我一个正则表达式来将模式从 MM dd yy HH
  • 如何修复“没有这样的文件或目录,lstat 'scss/'”?

    我正在尝试遵循 youtube 上的简单教程他尝试使用终端运行 npm 脚本 sass 文件 当我执行命令时npm 运行 sass显示错误消息错误 ENOENT 没有这样的文件或目录 lstat scss 我认为问题在于文件的路径或文件的权
  • 支持换行的 JQuery 工具提示

    我正在寻找一个轻量级的 jquery 插件 用于在用户将鼠标悬停在元素上时显示工具提示 我希望插件从标题属性中获取内容 而且我可以创建新行也很重要 任何帮助表示赞赏 在 jQuery 1 9 jquery jquery ui 和标准 too
  • jqGrid刷新本地数据(JSON对象)

    我正在尝试将 jqGrid 与本地数据一起使用 但发现了几个问题 我正在初始化这样的事情 function refreshGrid grid results grid jqGrid data results datatype local c

随机推荐

  • 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