有没有办法防止我的CSS关键帧动画开始，直到该元素滚动到视图中？

文章/答案/技术大牛

发布

1回答

css-animations、animate.css

我使用了一些关键帧来动画一些元素进入我的页面，但是这些元素位于页面的底部，所以动画在你看到它们之前就发生了。 有没有办法阻止动画的发生，直到用户滚动到元素的视图中？最好不是jQuery解决方案，因为我不熟悉它。注意:我知道有一个名为wow.js的<

浏览 16提问于2020-09-01得票数 0

2回答

当DIV进入视图时，添加类

jquery、css、viewport、addclass

我想在元素中添加一个类，比如DIV，但当用户滚动到视口时，它也会添加到img、h1等上。如何计算我的元素是否在视图中？在伪:如果#swing已进入视口，添加类‘动画bounceOutLeft’(使用CSS3播放动画)。当动画完成时，移除类‘动画弹出’。我只是不知道从哪里开始，只知道添加我想要的</em

浏览 0提问于2013-02-20得票数 2

回答已采纳

1回答

如何在用户滚动查看时动画

css、reactjs、css-transitions

我已经开始使用ReactJS构建一个网站，当视图滚动到视图中时，我想将div元素动画到视图中。我已经使用CSS关键帧添加动画，如这样； animation: IntroWelcomeImageAnimation 3s 0.2s forwards cubic-bezier/layout/intro.css'

浏览 2提问于2019-11-05得票数 1

回答已采纳

1回答

是否可以使用关键帧动画分别为多个css变换属性设置动画

css、animation、transform、css-animations

我想像这样使用关键帧动画分别为两个(或更多) css变换属性设置动画： 100% { transform: translateX(0延迟开始，并持续5秒。rotatez动画应以1s延迟开始，持续3秒。因此.rect元素开始移动，然后在1秒后开始旋转，然后在3秒后停止旋转，并在1秒后结束移动。: ease, ease-in-out

浏览 4提问于2012-11-27得票数 16

回答已采纳

2回答

css动画/过渡:一定时间后的淡出或上滑元素？

animation、css、css-transitions

在我的当前页面上是这个… <div class="wrapper inner message">Thank you!</div>css… position:fixed; top:0; width:100%; color:whi

浏览 3提问于2012-08-29得票数 3

回答已采纳

2回答

如何直接编辑未应用于元素的类的CSS属性(仅限JavaScript)？

javascript、html、css

简而言之，我有一个类，当某个事件发生时，我将其应用于一个元素。这是一个CSS关键帧动画，我使用classList.toggle在正确的时间应用该动画。但是，在将类应用于元素之前，我需要能够编辑该类的属性(动画持续时间)。 有没有办法只使用JavaScript (而不是jQuery)来编辑尚未应用于任何元

浏览 31提问于2021-09-05得票数 0

3回答

如何在滚动后激活animate.css

jquery、css、animation、animate.css

我正在使用animate.css ，我已经在我的网页中的一些元素中添加了一些动画。但是有一个问题。动画是立即完成的，并且在向下滚动到该部分之前已经结束。有没有办法在加载特定元素后添加动画类？这样，只有当用户滚动到该元素时，动画才可见。

浏览 23提问于2017-01-19得票数 0

1回答

将多个CSS* @keyframe动画锁定在一起*

css、css-animations、keyframe

我在CSS中有一些@keyframe动画和相关的类名。keyframes fade { opacity: 1; opacity: .5;} 如果我显示多个应用了.fade类的元素，有没有办法将它们锁在一起，使它们在动画关键帧中共享相同的位置？例如，如果我从

浏览 24提问于2020-10-17得票数 1

1回答

悬停上的Webkit关键帧-防止以前的动画

html、css、webkit、css-animations、webkit-animation

我有一个元素，我有一组@-webkit-keyframe可以在其中设置动画。在页面加载时，这些关键帧运行，并且介绍看起来很棒。接下来，我在hover上设置了第二组@-webkit-keyframe，并将其设置为repeat，所以在hover上，该元素有一个循环动画。这也很好用。但是，当我将鼠标从元素移开的瞬间，第一组(介绍)关键帧再次运行。我不希望它在第一次运行后

浏览 2提问于2011-10-20得票数 2

回答已采纳

1回答

角通用SSR CSS动画转换误差

css、angular、transform、universal

我在我的应用程序中添加了角通用，并遵循了上的指南--它实际上很简单，我只是在努力克服这个错误：原因是带有关键帧</e

浏览 2提问于2020-01-28得票数 1

回答已采纳

1回答

滚动/页面加载时淡入元素

jquery

我在一个网站上工作，我希望内容淡出，并在滚动到它在视口中。我有下面的代码在滚动上很好地工作-但想加强它在两种方式，我似乎不知道如何获得我想要的… 首先，我希望这个函数在页面加载时触发，所以如果页面在加载时滚动-视图中的项目应该淡出和动画进入视图-目前它们不会。其次--有没有办法在动画和淡出动画发生之前，稍微修改

浏览 7提问于2021-03-05得票数 0

2回答

在悬停时平滑切换动画

html、css、animation、transitions

我正在做一个项目，呼吁多个动画，移动图标，将停止，扩展，并移动到鼠标悬停的位置。有没有一种纯粹的CSS方法可以让元素从悬停事件开始时所处的(动画中间)位置无缝开始，并转换到新的最终关键帧属性，而不是从设置的初始状态开始？

浏览 0提问于2015-09-15得票数 3

1回答

Cytoscape.js在返回之前从视图中显示出动画

javascript、animation、cytoscape.js

从一个缩放级别的渲染位置到另一个缩放级别的渲染位置，所有的图形元素都停留在视区内，这是否能够顺利地动画？有办法绕道吗？我真的希望布局动画在默认情况下工作，以便在布局动画中考虑到fit (缩放/平移)，这样布局贴合渲染的</e

浏览 7提问于2022-01-12得票数 0

2回答

替换呈现的视图控制器时，TSAlertView会崩溃

ios、cocoa-touch、uikit、exc-bad-access、uistoryboardsegue

我正在使用优秀的项目为视障人士创建带有放大字体的弹出式提醒。不幸的是，我遇到了一个困扰了我几天的问题。该应用程序随机崩溃与EXC_BAD_ACCESS，我有根据的猜测是，当当前的UIViewController被释放时，TSAlertView已经完成了它的解除动画。一种明显的解决办法是增加当前UIViewCon

浏览 0提问于2013-02-08得票数 0

回答已采纳

1回答

如何运行CSS3关键帧动画一次，并且仅在触发时运行？

performance、css、animation、css-transitions、css-animations

我想实现一个HTML5动画，它涉及的不仅仅是将一个项目从A点移动到B点。这就是为什么我考虑使用关键帧而不是过渡。但是，我只想让动画运行一次，并且只在触发时运行。问题有两个: 1)当动画结束时，项目返回到其开始位置。有没有办法让它停留在结束位置直到另行通知? 2)有没有办法稍后从Javascript重新启动动画？

浏览 1提问于2013-10-25得票数 9

1回答

关键帧(CSS)中的“左”和“右”混合失败

html、css、animation、keyframe

</div>1)当动画开始时(0%)，任意长度的文本/divs内容的位置--我需要该内容的左侧边缘距页面左侧2个像素。>我发现，如果我只在上面的关键帧中使用“右”或“左”，那么文本和divs内容将从左滚动

浏览 0提问于2014-04-30得票数 1

回答已采纳

1回答

轻松使用jQuery动画

javascript、jquery、html、css

这个问题很简单，但我找不到解决的办法。我有一个jQuery动画，可以将页面滚动到一个元素：我想让动画有一个缓慢的开始和一个快速的结束(在css中缓入)。它应该是这样工作的： $(&#

浏览 3提问于2017-07-03得票数 0

1回答

无法向元素添加动画延迟

jquery、css、animation、delay

我想从css3动画的随机关键帧开始。对于负动画延迟，可以更改起始点。所以我的想法是这样做：console.log(random); '-webkit-animation-delay': random + 's'问题只有这

浏览 3提问于2014-08-12得票数 0

1回答

Skrollr.js相关关键框架和最佳实践

animation、parallax、skrollr

我希望能够在滚动点中描述相对于其他关键帧事件的关键帧，比如“在另一个元素的动画事件之后启动此动画事件500‘s”，并想知道最佳实践是什么。我正在制作一大页动画内容的多个部分。每个部分滚动到顶部，然后临时固定，因为多个动画发生在该部分内的许多关键帧，然后当该部分的动画完成后，它从屏幕上滚动，下一

浏览 3提问于2014-03-31得票数 1

2回答

Webkit内存限制-webkit-动画

css、animation、webkit

因为它们在关键帧中是不可动的，所以我将每个背景放在不同的div中，我正在播放那些div不透明和z-index：只有16个第一个动画能工作，17号我们只看到一个空白的div，直到所有动画重新启动。我注意到我在使用-moz-animation和火狐时没有问题，问题只发生在使用-webkit-的Chrome上。根据您的

浏览 1提问于2013-10-19得票数 1

回答已采纳

点击加载更多