css - @keyframes 不适用于 div 内的 div-6ren

css - @keyframes 不适用于 div 内的 div

转载作者：行者123 更新时间：2023-11-28 02:44:59

27

4

我是第一次使用@keyframes，但无法正常工作。

知道我做错了什么吗？

如果我将动画放在 .scroll_down div 上，它会进行动画处理，但我希望其中的 div 进行动画处理。我有什么理由不能这样做吗？

HTML:

<body>
  <div class="container_first">
    <div class="scroll-down">
      <div id="arrow">&#8681;</div>
    </div>
  </div>

CSS:

.scroll-down {
  display: block;
  height: 80px;
  width: 110px;
  display: block;
  position: absolute;
  bottom: 0px;
  right: 5%;
  background-color: #222;
  text-align: center;
  z-index: 6;
}

#arrow {
  color: #FFF;
  font-size: 36px;
  padding-right: 2px;
  padding-top: 10px;
  animation: bounce 1.2s linear infinite;
}

#arrow { padding-top: 0px; }
@keyframes bounce {
    0%   {top: 10px;}
    25%  {top: 15px;}
    75%  {top: 20px;}
    100% {top: 25px;}
}

最佳答案

你需要使 #arrow 位置相对。

http://jsfiddle.net/myvvwb4m/

#arrow {
  color: #FFF;
  font-size: 36px;
  position: relative;
  padding-right: 2px;
  padding-top: 10px;
  animation: bounce 1.2s linear infinite;
}

属性 top 不适用于静态定位的元素。

关于css - @keyframes 不适用于 div 内的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46965685/

27

4

0

文章推荐： php - 使用mysql数据库中的最新值获取选择框以设置默认值

文章推荐： c++ - 具有纯虚方法的接口(interface)与类

文章推荐： javascript - 使用 Knockout-Kendo.js 库刷新 KendoDropDown

文章推荐： html - 如何在 bootstrap 4 中的响应图像内制作响应框？

CSS3 圆周运动不适用于带有@-webkit-keyframes 的chrome，而在Firefox 中与@keyframes 一起使用
这是在 Chrome 中不是由 orbit 动画的圆圈。 http://jsfiddle.net/ztkav838/ //CSS @-webkit-keyframes orbit { from
CSS @keyframe 不起作用
我一直在查看示例，但我在这里遗漏了一些东西。我无法启动这个简单的 css 动画，改变某些文本的颜色。当我运行下面的示例时，文本保持黑色。我有一个名为“changeColor”的动画，应用于 h1 元
CSS @keyframe 不工作
我一直在浏览示例，但我会在这里遗漏一些东西。我无法触发这个简单的 css 动画，改变一些文本的颜色。当我运行下面的示例时，文本保持黑色。我有一个名为“changeColor”的动画，应用于 h1 元
javascript - 第二次单击按钮时如何重复@keyframes？
我想在第二次点击按钮时重复@keyframne 动画，但它只生效一次。 $(document).ready(function(){ $('#btn_c
CSS @keyframes 缩放文本模糊
我在@keyframes 动画中缩放文本，当文本增加时，它变得模糊，我该如何防止？ JS Bin Example 谢谢! 最佳答案解决问题的最简单方法是将最大状态比例设置为 1，将较小状态比例设置为
css - @keyframes 改变元素的内容
我正在尝试创建一个关键帧，它会在查看几秒钟后更改 div 容器的内容，但它不起作用。这是我的代码: @-webkit-keyframes k_home_projectSlider { 0%
CSS @keyframes 动画在悬停时不断闪烁
当我创建 @keyframes 动画并将其分配给悬停时的图像时，它会随机闪烁。正如您在 GIF 中看到的那样，它只能随机地正常工作几次。我已经尝试了以下所有方法并为每个供应商添加了前缀: 背面可见性
css3 @keyframes 动画悬停
我有一个 css3 @keyframe 动画，我在控制时遇到了一些麻烦。这是一个分为两部分的动画，有一个平放的高矩形，在第一部分中它假设旋转 90 度并将 z 轴向上平移向您同时也向左平移，然后完成
css - @keyframes 将不同的浏览器版本合并为一个
是否可以减少代码以生成一组可以处理各种浏览器前缀的混合宏？尝试减少代码长度以使用更多mixin 所以代替 @-moz-keyframes orbit { 0% { opaci
css - @Keyframes 不工作
我正在尝试使用 @keyframes 制作动画。但是，该示例不起作用。 .main{ width:100%; height:500px; border: 1px solid black; } @
css - @keyframes 动画中的时间
所以我正在制作一个简单的元素，它会显示一个计时器并仅使用 HTML 和 CSS 计数到 99。但是有人能告诉我为什么我需要延迟我的 100 秒动画以使其与 10 秒动画同步吗？ .second::b
css - @keyframes 文本后面的动画
我有四个动画 div 元素，它们在 section 元素内旋转。 div 元素需要放在文本下方(假设它有背景)，这样就不会出现冲突线，所以我尝试做的是添加 background-color: #aea
CSS- KeyFrame 无效的属性值
不确定我在这里面对的是什么，但我正在尝试应用 CSS 动画。经过一些研究，我认为添加 webkit 前缀将有助于解决问题，但看起来我仍然面临读取无效属性值的问题。这是我当前的代码: .progre
CSS @keyframe 动画缓出
我试图让动画在悬停后缓和到元素的原始值。动画本身工作正常，但是当我将鼠标悬停在该元素上时，它会立即恢复到原始状态，而我希望有 0.2 秒的缓和。有什么帮助吗？这是我的代码: img.footer {
html - @keyframes 不适用于 %
.car1 仅在使用 @keyframes 的 from 和 to 时移动，但在使用时不移动%。谁能解释为什么会这样？ .car1 { animation: car1 2s 2 forwards;
html - @keyframes 不适用于幻灯片
似乎无法让我的图像 slider 工作，我打算将其用作我的页面的标题，但图像不会滑动。我已经尝试过 chrome 的前缀，但它们没有任何区别。这是C
css - 悬停时的@keyframes
我正在尝试做的事情:我在黑盒子里有链接。我试图在悬停时使框的背景从黑色变为蓝色。我不知道该怎么做。这是我的 CSS(我将它设置为 5s 但我真的希望它在悬停时生效) @keyframes navBox
html - @Keyframes 不要移动我的div
我试图用 CSS3 使我的 div 上下移动，但它没有 @-webkit-keyframes mover { 0%, 100% { top: 0%;} 50% { top: 5%;
javascript - @keyframes 动画文字淡入淡出
我正在尝试编写此文本动画效果 ( please see video )，但我离解决方案还很远!! 你能帮帮我吗？也许使用 js 更好？ h1.fadeinone { animation: fadein
css - @keyframes 动画没有运行
这个问题在这里已经有了答案: Using percentage values with background-position on a linear-gradient (2 个答案) 关闭 3

首页

博学

6Ren·AI

商城

css - @keyframes 不适用于 div 内的 div