从屏幕外动画一个div，没有绝对位置？
从屏幕外动画一个div，没有绝对位置，可以通过CSS动画和过渡效果来实现。以下是一个示例代码：
HTML代码：
<div class="container">
<div class="animated-div"></div>
</div>CSS代码：
.container {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
}
.animated-div {
position: relative;
width: 100px;
height: 100px;
background-color: #f00;
animation: slide-in 1s forwards;
}
@keyframes slide-in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}解释：
- 首先，创建一个包含动画的div的容器，设置容器的宽度和高度为100%以充满整个屏幕。
- 接下来，创建一个具有动画效果的div，设置其初始位置为屏幕外左侧（translateX(-100%)），并通过动画属性（animation）和关键帧（@keyframes）来定义动画效果。
- 在关键帧中，将div从屏幕外左侧移动到屏幕内（translateX(0)）。
- 最后，将动画应用于div元素（animation: slide-in 1s forwards），使其在1秒内完成动画，并保持在最终位置。
这样，当页面加载时，div元素将从屏幕外左侧滑动进入屏幕内。
相关·内容
2回答
我有一个记分牌..。<div class="inner color3 slow"> </div>我已经包含了一个jsFiddle：
这个页面有一大堆的动画</em
浏览 0提问于2016-08-20得票数 2
回答已采纳
我有一个绝对定位div的网格(网格由不同形状的矩形组成，它们拼接在一起形成一个大矩形)。
我试图通过让所有单独的矩形从屏幕外‘飞’到网格中来动画这个网格的显示。所以左边的矩形从左边飞进来，右边的矩形从右边飞进来，等等。我正在使用CSS3过渡，当从顶部或左侧飞入时，它可以完美地工作，我只需使用负边距将它们定位到屏幕外，然后将其动画更改为边距-左侧(
浏览 3提问于2014-06-19得票数 9
回答已采纳
2回答
我有一个绝对的布局。在该布局中是一个自定义视图，它占据了屏幕的左3/3。我在布局中放置了一个按钮，希望使自定义视图滑入和滑出屏幕。我试过使用动画资源(翻译过来是..."我从可见的自定义视图开始，在onCreate中我找到了该视图，并使用我的滑出动画在屏幕外对其进行了动画处理。这很好用。我想我需要在动画中设置"fillAfter“，这样
浏览 5提问于2011-02-22得票数 2
1回答
我正在设计一个带有jQuery动画的div页面。这包括移动div并缩放它们(通过在.animate()参数之间设置宽度和高度)。我没有看到使用我的MacBook的动画有任何缺陷，同时使用了chrome和firefox，但是我的I已经被告知，如果页面单独放置8-10分钟，div就会开始偏离位置。
，这怎么可能？可能是在速度较慢的电脑上，动画不同步吗？我同时动画5div，并设置一个内部
浏览 2提问于2012-01-08得票数 0
2回答
在动画之后，我在用jquery重新设置div的左边位置时遇到了问题。我试图从屏幕上(左)到屏幕上动画一个div。但是，只有当窗口的scrollTop值大于某个值时，我才希望触发此动画。一旦scrollTop的值小于该值，我希望div的位置发生变化，以便它再次脱离屏幕。这是可行的，但只是有时，我不知道为什么。我还将div的位置设置
浏览 1提问于2018-04-19得票数 0
回答已采纳
摘要:一个绝对定位的元素在任何情况下都关心它的兄弟元素吗(兄弟元素是相对的，绝对的，还是静态的)？inner yellow box should completely fill up screen</div>我有一个容器(“外容器”)。绝对位置，100% x 100%宽度和高度。它应该占据jsFiddle的整
浏览 0提问于2018-03-06得票数 2
我正在寻找一种方法来滑动到左边的背景图像，并有另一个背景图像取代第一张幻灯片从右边。需要对此进行设置，以便可以替换图像(因此，当您单击页面时，唯一的图像将进入，而前一个图像将被替换)。animate函数：animate("backgroundPosition: "-" + $(window).width() + " 0px");目前，我在body后面有一个div标签，它有100%的高度和宽度，绝对位
浏览 3提问于2012-08-24得票数 0
回答已采纳
1回答
在我的网站上，我有一个在父div中有绝对位置的div。我想要的是当我点击div时，它必须放大并定位在浏览器的中间。innerWidth() - 923)/2, }, 1000)});
它工作了，但发生的是#mac首先定位在我屏幕的左上角，然后动画到我屏幕的中心。这是有意义的，因为使用了位置固定。但是当我不使
浏览 1提问于2012-04-12得票数 1
回答已采纳
1回答
我想让UILabel name从它的位置动画到屏幕外(左侧)，但我的动画将标签从屏幕外(左)动画到它的位置，这是在故事板中设置的。怎样才能得到我想要的动画？
浏览 3提问于2016-02-27得票数 0
我试图运行一个动画，它使用一个项目在UIScrollView中的位置作为目标坐标。在某些情况下，在运行相同的动画之前，我需要抵消滚动视图以显示目标UIImageView。CGPointMake(dest_image.frame.origin.x, dest_image.frame.origin.y) animated:YES];
但是，当我试图使用上面相同的endPoint代码获得绝对位置时，目标是屏幕外的。在更改self.view后
浏览 1提问于2013-10-10得票数 0
回答已采纳
假设我有一个3列的<table>或<div>，宽度分别为50%、200px和empty但是，页面可能会在较小的屏幕上查看
浏览 3提问于2009-11-08得票数 2
回答已采纳
1回答
我在网格布局中有一个带有div a的父容器display: grid，其中包含子容器div b、div c等。当在相应的容器上盘旋时，我如何缩放子容器，使其增长到父容器的大小？除其他外，我曾试图更改为绝对位置在悬停，但由于position属性不能动画，这没有工作，我。非常感谢。
浏览 8提问于2022-11-26得票数 0
2回答
我有一个动画，当我在DIV上.hover时开始。在这个div中，我有另一个绝对位置，我想要向上移动，直到鼠标停留在main div上，当我离开main div时，在你的位置向下移动。一个简单的悬停效果。我已经写下了这个函数，它很好地分离了一个奇怪的bug。bottom:'-=30px'
浏览 0提问于2010-06-07得票数 5
回答已采纳
假设我有两个具有相同CSS类的div，它们堆叠在彼此的顶部： width:100px; background: red;如何使其在单击页面顶部的按钮时，从屏幕底部的屏幕外创建一个新的div，并向上移动到第二个div所在的位置。当再次单击该按钮时，第4个div将从屏幕底部移入，并停在第3个div所在的<em
浏览 0提问于2012-06-13得票数 0
回答已采纳
我有一个移动页面，js-library只为DOM和事件(zepto)，没有花哨的ui-库。
现在我想添加一些“模态”特性。想想向右滚动的“推”，加载的内容会向左平移。完成后，将原始页面弹回。
浏览 0提问于2011-12-11得票数 0
我有一个固定的侧面导航菜单，不在屏幕上。我希望有它的动画从屏幕外的屏幕上的特定位置。此外，它需要移动的量根据屏幕大小的不同而变化(即间隔改变大小)。因此，我需要将它移动到相对于容器div的特定位置(保持在屏幕的中心)。
对此最好的方法是什么？任何帮助都是非常感谢的。谢谢!
浏览 1提问于2012-10-31得票数 2
回答已采纳
1回答
我试图将一个带有动画的DIV从中间移动到左边，默认情况下，在jQuery中单击DIV，其中父div与position:relative，我想的是，单击父DIV位置将从相对于绝对，然后运行动画功能，但它不工作，它只是从中心到左，点击点击，没有动画。$(".column-wrapper").css({position: "absolute"}).animate({
浏览 5提问于2016-09-02得票数 0
回答已采纳
2回答
我想动画之间的“默认”状态/立场为一个div。例如：
Div 绝对是用类定位的，位于屏幕的左边。类通过JS (或替换)删除，现在位置为相对。默认的相对位置实际上在屏幕的另一边。我想把这个动画化。类似于一个码头，各种div作为图标在显示内联，水平居中的码头。如果我“删除”其中的一个图标，其余的将移到重新开始。我想让他们动起来，移动以填补空白。转换:所有这些
浏览 4提问于2012-06-20得票数 1
1回答
有没有办法告诉翻译动画总是移动到一个绝对位置，而不是一个相对于卡片的位置。据我所知，使用android:toXDelta只会将其移动到一个相对位置。我希望它从屏幕上的每一点移动到一个绝对位置(比如屏幕/2的宽度和屏幕/2的高度)。我的动画：
<translate xmlns:andro
浏览 1提问于2015-11-03得票数 0
回答已采纳
1回答
我有一个加载屏幕/弹出屏幕，它是我调用API时显示的片段。我喜欢它目前的样子，但我想通过在load屏幕的视图中添加一些动画来使它活跃起来。我正在使用属性动画框架来很好地缩放和更改视图当前位置的Alpha值(透明度)。
我现在正在尝试获得一个视图，以动画(平移+ alpha更改)到它在静态屏幕中的当前位置。如何将视图从屏幕外的某个点转换到
浏览 4提问于2015-10-19得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
