CSS关键帧动画不适用于浮动元素
CSS关键帧动画是一种在网页中创建动画效果的方法。它通过定义一系列关键帧，描述元素在动画过程中的状态变化，然后浏览器会根据这些关键帧自动生成动画效果。
然而，CSS关键帧动画在浮动元素上的应用存在一些限制和不适用的情况。浮动元素是一种常用于网页布局的元素，它可以使元素脱离文档流并环绕在其周围的内容上。由于浮动元素在页面布局中的特殊性，导致CSS关键帧动画在浮动元素上的效果不如在其他元素上那么理想。
具体来说，CSS关键帧动画不适用于浮动元素主要有以下几个原因：
- 动画效果不可见：由于浮动元素会脱离文档流，其位置在页面布局中可能会发生变化。而CSS关键帧动画是基于元素位置的变化来实现动画效果的，如果浮动元素位置变化频繁或不可预测，那么动画效果很可能不会被用户所感知到。
- 交互效果受限：浮动元素通常用于网页中的导航菜单、侧边栏等与用户交互较多的部分。然而，由于浮动元素在动画过程中可能会发生位置变化，这可能会影响用户与这些元素的交互体验，导致用户操作的困惑或干扰。
虽然CSS关键帧动画不适用于浮动元素，但对于其他类型的元素，如普通的块级元素或行内元素，它仍然是一种非常有效和常用的动画实现方法。在这些情况下，可以使用CSS关键帧动画创建各种动态效果，如渐变、旋转、缩放等，来增强用户对网页的视觉体验。
此外，腾讯云也提供了一些相关的产品和服务，如云原生应用引擎 Tencent Serverless Framework（https://cloud.tencent.com/product/scf） 和静态网站托管 Tencent Cloud Object Storage（https://cloud.tencent.com/product/cos），可以帮助开发者更方便地部署和管理网站、应用程序，并提供高可用性和可伸缩性。但请注意，这些产品和服务与本问题的主题没有直接关联。
相关·内容
1回答
我想知道是否有一种方法可以使用web动画API一步一步地制作web动画，而不必手动声明每个帧的开始和结束的偏移量。显然，你可以在CSS动画中做到这一点。
这是用于制作精灵工作表的动画。
浏览 11提问于2019-11-12得票数 1
当我向动画添加延迟时，这个简单的基于钩子的动画包装器不能正常工作。
请参阅
代码作为一个合理的简单动画包装，没有任何css动画延迟。
animation: `${show ? "fadeIn" : "fadeOut"} 1s`
但是，当我在css动画中添加延迟时，它会在没有任何动画的情况下呈现div，然后在延迟后再用动画呈现。
例如：
return (
render && (
<div
style={{
animation: `${show ? "fadeIn" :
浏览 3提问于2021-12-29得票数 1
回答已采纳
2回答
我想在页面加载时(在一个小延迟之后)将闪烁动画应用到一个按钮上，在按钮悬停时使用相同的动画。然而，只有一个动画作品。当两个动画都没有注释掉时，加载页面时的动画就会工作。当我注释掉这个动画时，悬停动画就能工作了。我不明白，为什么会这样。
HTML代码：
<div class="container">
<a href="#" class="btn">Hello</a>
</div>
CSS代码：
* {
margin: 0;
padding: 0;
box-sizing: bor
浏览 1提问于2022-07-07得票数 -1
2回答
我正在尝试动画一个div，以便当页面加载时，它具有缩放(0，0)和缩放(1，1)的动画。我遇到的问题是，一旦动画生效，div就会再次缩放到0。我想要的是div动画缩放(1，1)，并保持原样。这是我的CSS代码
@-moz-keyframes bumpin {
0% { -moz-transform: scale(0,0); }
100% { -moz-transform: scale(1,1); }
}
.landing .board {
-moz-transform: scale(0,0);
-moz-transform-origin: 50% 50%;
浏览 22提问于2012-02-08得票数 11
回答已采纳
1回答
我需要关于webkit规模功能的帮助。
我有一个.css文件，其属性如下：
@-webkit-keyframes expand
{
from {-webkit-transform:scale(1)}
to {-webkit-transform:scale(1.2)}
}
.image-highlight
{
-webkit-animation-name: expand;
-webkit-animation-duration:0.2s;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-
浏览 1提问于2011-09-28得票数 0
回答已采纳
2回答
很多人需要重新启动他们的CSS3动画；而我想要的恰恰相反：
如果我通过添加适当的css类来启动动画，动画就会开始；如果我随后使用一系列parentNode.insertBefore调用(并重用完全相同的节点实例)对容器进行排序，则每次动画都会重新启动。
我能做些什么来防止这种行为吗？
这里有一个演示此行为的小提琴：
单击Add all，让动画播放几秒钟，然后单击shuffle:任何移动的节点都会重新启动动画。
container.insertBefore(node, childrenClone[Math.floor(Math.random() * childrenClone.length)])
浏览 0提问于2013-01-23得票数 3
2回答
我有一个div，我用css淡入(从右到左)：
CSS:
#mydiv {
animation: slideIn 1s ease 0s 1;
}
@keyframes slideIn {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
当我单击“关闭”按钮时，它应该以相同的方式淡出：
JS:
$("#close").on('click', function(e) {
$("#mydiv").css({ &#
浏览 1提问于2018-10-13得票数 0
回答已采纳
1回答
好的，我有这个旋转的CSS3动画(在动画中有一个重复超时)，但是我得到了这个非常奇怪的行为，动画看起来像动画一样“向后跳”。
我这里有一个JS的演示(编辑-请原谅长时间的延迟，它是动画的一个必要的部分-一个长超时)：
为了子孙后代，这是我的CSS
#logo { position: relative; float: left; width: 175; height: 75px; margin: 0 0 16px; padding: 0; }
@-webkit-keyframes rotate {
0%, 65%, 75%, 100% {
-webkit-transform:
浏览 2提问于2011-10-16得票数 1
回答已采纳
我正在开发一个使用PhoneGap和jQuery的应用程序，对动画有点困惑。
我决定使用我已经知道的东西，那就是jQuery动画，这个效果很好，除了我遇到的人在谈论硬件加速。
我所要做的就是让div在页面加载时向右移动：
$("#"+that).find('.captionShine img').animate({left: '550'},700);
我发现了一个叫做jQuery-Animate-Enhanced的插件，它可以将这些动画转换成CSS3转换，因此硬件可以加速它们(我相信)。
因此，我更深入地研究了CSS3动画，并对CSS3中的过渡和
浏览 1提问于2013-06-14得票数 1
回答已采纳
我试图添加更多的图像到我的CSS，以便我可以动画与@关键帧他们，但我不知道如何添加他们。有人能帮忙吗？我之前试过了，但我做得不对。
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css"/>
<title>CSS Animation</title>
</hea
浏览 3提问于2021-12-02得票数 1
回答已采纳
2回答
CSS3动画位置
、、
考虑船舶在蓝色分区上方移动的CSS3动画。由于某种原因，船不动了。HTML如下：
<div id="wrapper">
<div id="sea">
<img src="ship.png" alt="ship" width="128" height="128"/>
</div>
</div>
为了制作CSS3动画，我使用了以下方法：
#wrapper { position:relative;top:50px;width:70
浏览 0提问于2012-05-03得票数 11
回答已采纳
1回答
我有一个简单的路径，我应用了一个破折号数组和一个带有CSS的破折号偏移。然后我给这个简单的构造动画化。动画更改破折号数组和偏移量，以减少，然后再增加大小。
奇怪的是，这一运动似乎已经逆转了一半。有人能帮忙吗？我确信这并不是真正的逆转，而是数学造成了意想不到的视觉效果。
.path {
stroke-dasharray: 10;
stroke-dashoffset: 10 30;
animation: dash 5s linear infinite;
}
@keyframes dash {
50%{
stroke-dashoffset: 35%;
stro
浏览 2提问于2019-10-02得票数 0
回答已采纳
2回答
Css动画-停止和恢复动画
、、、、
我希望我的自定义元素在单击按钮时向右移动200px。因此，元素在单击时开始移动。在动画中，我希望能够再次单击按钮来停止，并让元素有一个动画返回到初始状态(从当前状态反向动画)。
我用css转换实现了这一点：
var state = false;
var button = document.getElementById("but");
button.onclick = clickA;
function clickA(){
state = !state;
var el = document.getElementById("el");
if
浏览 14提问于2017-05-02得票数 1
2回答
CSS动画忽略z索引。
、、、
我想有两个图像相互重叠，与动画图像在后面和静态图像重叠。没有动画，它可以很好地与红色重叠的黑色图像。
当我添加css动画时，它会忽略z索引集，而黑色与红色重叠。我要怎么把红色的图像带到前面？
我有一个使用css背景的解决方案，但是我希望图像能够响应
这是一把小提琴
css在这里
.rotate{
z-index: 1;
-webkit-animation:rotation 20s linear infinite;
-o-animation:rotation 20s infinite linear;
-moz-animation:rotation 20s infinite linear;
an
浏览 4提问于2014-09-09得票数 0
回答已采纳
1回答
我需要做的是像自动启动过渡。但是转换不能自动启动，所以我想使用一个动画，它不会在动画结束后返回到元素的原始CSS样式。
浏览 1提问于2013-10-16得票数 0
回答已采纳
2回答
我有一些CSS动画，关键帧在我的页面上的fadein/out元素。问题是，当我加载页面时，会显示淡出的动画。
HTML：
<button class="toggle-good">Toggle display</button>
<p class="box">I move nicely!</p>
CSS：
.box {
height: 0;
opacity: 0;
animation: FadeOut 1s ease-in-out;
}
.box.active {
height: initial;
浏览 3提问于2016-08-19得票数 0
回答已采纳
上下文：
根据
如果未指定“0%”或“来自”关键帧，则用户代理将使用动画属性的计算值构造“0%”关键帧。如果没有指定“100%”或“到”关键帧，则用户代理将使用动画属性的计算值构造“100%”关键帧。
这可能导致两种不同的解释：
A)在类中声明属性，而不是在0%或from关键帧中声明。
B)在类中声明属性，在0%或from关键帧中声明。
简化示例：
p:first-of-type {
opacity: 0;
animation: a 3s linear infinite alternate;
}
@keyframes a {
100% {
op
浏览 0提问于2016-11-01得票数 9
回答已采纳
1回答
我正在使用一个新的库创建反应组件，样式-组件。
我想通过onClick在我的组件上应用动画Tremble。
export class FormLoginTest extends React.Component { // eslint-disable-line react/prefer-stateless-function
static propTypes = {
isTrembling: React.PropTypes.bool
};
static defaultProps = {
isTrembling: true
浏览 3提问于2016-11-01得票数 3
1回答
我想创造一个动画背景。总之，有6个图标应该所有动画在一个小范围内的页面周围移动。
目前的JS Fiddle在一定程度上起作用，但需要进行以下修改：
我希望随机生成这些图标的移动，以便它们在以下范围内运行：
x axis = 1px to 5px
y axis = 13px to 20px
我已经成功地获得了一个使用硬编码值的解决方案，但现在认为我的使用了错误的方式，因为它需要为每个具有不同值的图标创建多个关键帧动画。我不一定反对，但我不知道如何实现。
我使用以下方法为上述边界内的每个图标生成了随机数：
var x = randomInt(5, 1); // use this value fo
浏览 4提问于2015-06-11得票数 1
回答已采纳
2回答
我有一个简单的CSS动画代码，但动画效果没有显示在谷歌Chrome浏览器。
我不知道缺了什么。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS Animation</title>
<style>
@keyframes colors {
0% ( background
浏览 0提问于2016-01-04得票数 2
2回答
为什么我的动画要做我不想做的事？
、、、、
我正在尝试动画卡处理CSS和jQuery。
我已经在窗口底部定位了一个卡的.png图像，我希望它通过旋转和移动到屏幕顶部来响应单击事件。虽然卡片是这样做的，但当动画完成时，它不会停留在x，y坐标上。它实际上重新定位了从屏幕底部开始的位置。
为什么？
我只是在愚蠢地去做吗？
@-webkit-keyframes deal {
from {
}
to {
left: 0px;
top: 0px;
-webkit-transform: rotate(720deg);
}
}
img {
position: absolute;}
.card {
浏览 0提问于2014-07-11得票数 1
回答已采纳
1回答
我想从同级元素的关键帧动画中更改元素的CSS属性，比如动画的50%标记。
所以，就像
@keyframes animname
{
....
50%
{
sibling-element{ display:inline;}
}
....
}
浏览 0提问于2015-05-04得票数 1
回答已采纳
1回答
Fiddle这里：
我试图链接CSS动画，这样我就可以编写一般的动画，这些动画不需要事先知道发生在它们之前的值。
例如：
MyDiv有一个动画，它将opacity从0动画到SomeValue动画。然后，第二个动画淡出，从SomeValue到0。目前，我必须编写一个动画以淡入0.5，然后另一个动画从0.5逐渐淡出到0。
我试图这样做，方法是不将opacity属性放入0%关键帧中，如下所示：
@keyframes fadeinhalf
{
0% { opacity: 0; }
100% { opacity: 0.5; }
}
@keyframes fadeinfull
{
0% {
浏览 3提问于2016-12-05得票数 1
回答已采纳
我目前正在做一个新的项目，刚刚开始深入研究CSS动画。我的问题是:如何创建动画队列的时间线？也就是说，如何让一个动画在另一个动画结束后高效地运行？ 我正在尝试实现的一个示例：https://www.v2.aristidebenoist.com/
浏览 35提问于2019-03-14得票数 0
回答已采纳
1回答
我试着在左边做一个搜索框，在右边画一个箭头。浮点数不起作用，箭头离搜索框很近。也尝试了左:0px和右:0px。有人能帮忙吗？谢谢。
.candidate {
display: flex;
width: 100%;
}
.candidate-search {
width: 50%;
float: left;
}
.pagearrow {
display: flex;
float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstra
浏览 1提问于2021-10-27得票数 2
回答已采纳
2回答
我有一个按钮，它打开一个“菜单”与css动画。它就像动画中的淡出/幻灯片：
现在我想实现这个动画反转(淡出/滑出动画)点击，但我不知道我怎么能实现它
var isOpen = false;
$("#Widget").click(function() {
// Close
if (isOpen == true) {
isOpen = false;
$("#Widget").html('Open')
// Open
} else {
isOpen = true;
$('<div
浏览 1提问于2019-11-01得票数 1
回答已采纳
我阅读了文档，并使用keyframe来声明css动画。但我得到的错误消息如下： 请将您的字符串包装在css帮助程序中，以确保样式被正确注入。 所以，我用cssinstead keyframes包装了动画，但是动画不起作用。 const rippleAnimation = css`
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(var(--material-scale));
opacity: 0;
}
浏览 19提问于2020-10-25得票数 0
回答已采纳
当我使用CSS3动画在两幅图像之间无限地改变背景时，即使我使用步骤(2)：‘，这些图像也会产生褪色效果。
body{
background: purple;
}
.rabbit{
width: 130px;
height: 224px;
background-size: 100%;
animation: jump 2s infinite steps(2);
}
@keyframes jump{
fro
浏览 4提问于2015-09-27得票数 0
回答已采纳
1回答
不过渡的CSS转换
、、、、
所以我有以下的JS：
$('.metric-number, .compareToTotal').css({opacity : "0"}).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
$(this).css('display', 'none');
$('.forum-select-button').css({'display' : 'inli
浏览 1提问于2015-04-15得票数 1
回答已采纳
1回答
嗨,
我有一个关于CSS动画和过渡的问题。
$(document).ready(function(){
$(".d1").click(function(e){
$(".d2").css("animation-direction", "reverse");
$(".d3").css("animation-direction", "reverse");
});
$(".d2").click(function(e){
浏览 1提问于2016-05-26得票数 2
回答已采纳
1回答
我正在尝试在完整的css3动画中按顺序对元素进行动画。似乎非常直接的答案是使用动画延迟。但是我想要这个循环，你有什么办法让动画无限循环吗？
我在一个类似的问题上找到了这个。基本上这是相同的逻辑，但我只是想让它循环。
这是类似的
使用的是：
@-webkit-keyframes FadeIn {
0% { opacity:0; -webkit-transform:scale(.1);}
85% {opacity:1; -webkit-transform:scale(1.05);}
100% {-webkit-transform:scale(1); }
}
.myClass img { flo
浏览 0提问于2013-04-26得票数 8
回答已采纳
3回答
两个div并排，一个向左浮动，宽度为25%，另一个宽度为75%。但是，当填充应用于右侧div时，填充不能正常工作。
下面是一个JSfiddle示例：
<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>
CSS
#top {
float: left;
background-color: green;
width: 25%;
height: 100%;
}
#middle {
backg
浏览 1提问于2013-05-21得票数 2
回答已采纳
看看这个JSFiddle：
在Firefox中，它的动画效果与预期不谋而合--里面的红色圆圈一圈一圈地转，外面的蓝色圆圈以不同的速度向另一方向旋转，淡入淡出。
这过去在Chrome中运行良好，但自从最新更新到21.0.1180.75m后，外部蓝色圆圈停止旋转。
以下是Chrome上动画的CSS：
@-webkit-keyframes spinPulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
40% { -webkit-transform:rotate(1
浏览 2提问于2012-08-15得票数 3
1回答
我试着做一个简单的动画:让一些元素旋转。
但是有一些错误:元素不是旋转，而是移动，就像我应用了"translateX“转换函数一样。
我认为问题的出现是因为我在JS部分应用了转换函数。但是我找不到合适的解决方案(我不想手动创建每个元素)。
JS部分：
$container = document.getElementById('container');
$block = document.createElement('div');
$block.className = 'block';
for(var i = 0; i < 3; i+
浏览 2提问于2014-01-14得票数 1
回答已采纳
我在访问放置在MC中的List和TextInput字段时遇到问题。我要做的是一个菜单的动画。所以我把按钮，列表和一个TextInput放在我想要动画的MC里面。
我尝试这样访问它们：
string_variable = mc_name.textInput_Name.text;
在我将这些控件放入MC之前，一切都运行得很好。当然，代码中没有mc_name。在那之前的前缀。
我做错了什么?我如何才能解决这个问题？我的目标是制作一个包含按钮和其他控件的剪辑的复杂关键帧动画，特别是List和TextInput控件。
谢谢。
浏览 0提问于2014-03-06得票数 0
1回答
当我在IE11上观看CSS动画时，我一直在调查和奇怪的行为。我已经发现了多个例子，其中IE11很难消化类似Chrome/Firefox的CSS动画，但是，我想一劳永逸地为这个"bug“提供一个解决方案。
行为示范：
如您所见，当用户与“按钮”交互时，预期的动画将从右下角滑入，向上缩放，并将不透明度设置为1。以下方法的一般表示形式如下：
.element {
...
opacity: 1;
animation: animate 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes animate {
浏览 1提问于2018-06-26得票数 1
回答已采纳
1回答
任何人都知道我可以在哪里找到开源CSS动画，我可以应用到我的网站。
我经常使用CSS3，但不太喜欢动画，在我尝试自己构建一个之前，我想看看开源社区提供了什么。因为说实话，我觉得这很可怕。
浏览 0提问于2013-04-14得票数 1
回答已采纳
2回答
我试图结合jQuery和CSS3来提供流畅的动画，但我仍然发现动画可以是抖动的，即使在桌面上也是如此。
我使用下面的代码将我的id从页面边上移到页面上。
$(id).addClass('active').css({ left: pageWidth })
.animate({left: 0}, 500, function(e){deferred.resolve()})
.css("-webkit-transform", "translate3d(0px,0px,
浏览 1提问于2014-11-05得票数 0
我正在尝试让<main>元素从页面加载的视区底部向上滑动。
我正在使用一个已经构建好的动画，但是当我将它应用于元素时，它就不起作用了。
我做错了什么？
下面是一个重现这个问题的JSFiddle：
没有任何奇怪或冲突的CSS应用于主元素，如JSFiddle所示。应用于<main>的CSS用于样式而不是动画，如下所示：
main, [role="main"], #main{
height:400px;
width:200px;
margin:0 auto;
background:red;
display:block;
浏览 1提问于2013-05-01得票数 0
回答已采纳
1回答
列出的一般可动画CSS属性是否有差异？
某些CSS属性可以使用或动画。动画意味着它们的价值可以在给定的时间内逐渐改变。
waapi是的子集吗？
这些属性列在某个地方吗？或者我必须复制这些来检查字符串是否是这样的属性？
浏览 1提问于2019-11-08得票数 0
回答已采纳
我已经创建了自己的视图之间的过渡动画。我对位置和变换这两个属性进行了动画处理，以便在视图之间提供类似于立方体的过渡。框架使用CABasicAnimation，而转换使用“2阶段”CAKeyframeAnimation。一切都很好，除了一个小细节，我似乎无法弄清楚。在我的过渡中，我在中间的关键帧上应用CATransform3DScale来创建放大/缩小效果。这很好用，除了动画看起来有点抖动。它是以线性的方式在关键帧之间设置动画，我想要平滑这一点。现在，CAKeyframeAnimation有一种使用calculationMode实现此目的的方法，但它似乎不适用于转换。我尝试将其设置为kCAAni
浏览 0提问于2012-07-21得票数 4
回答已采纳
2回答
我有一个3雪佛龙动画序列设置的后退按钮，我设计的。动画触发器按我想要的方式悬停，但当我从按钮上悬停时，它不尊重动画属性的ease-out部分。我知道，通常使用CSS动画，您可以通过将动画放在实际元素上而不是:hover状态来解决这个问题，但问题是关键帧动画会在页面加载时触发，并且在:hover上会有些不稳定。是否有鼠标出或悬停的状态，我可以使用，以便当用户离开按钮时，动画会放松，甚至逆转？我尝试将animation-direction: reverse;属性添加到基本元素中，但这没有起到任何作用，可能是因为它不知道我指的是什么动画，因为由于上述原因，它不在基本元素中。我是否需要一些CSS或ja
浏览 4提问于2022-03-16得票数 0
回答已采纳
2回答
我只是在制作一个带有fixed背景定位的元素的网页，在我将css动画应用到一个(完全不同和不相关的)元素之前，它工作得很好。
我试着删除/重新应用动画，以确保它确实是问题所在，而且，当我添加动画时，背景定位(页面上的每个元素)都是静态的，并且在删除动画时再次工作。
这是正常的吗？
最终，我在寻找一种解决方案，允许：
相对定位，
浮动元素(或类似包装器的最小子元素)
用于固定的背景位置
在使用CSS3动画的网页中，
与Chrome兼容。
下面是动画：
这里没有他们：
我只在Chrome上测试过这个。
UPDATE：如一个答案所示，给出具有固定背景位置的元素
浏览 8提问于2014-04-05得票数 4
回答已采纳
我在某个地方读到过，(不幸的是，我再也找不到我的源代码)，如果一个用户已经用运行的CSS3动画(无限参数)加载了一个HTML页面，并且他决定离开它，浏览器(计算机)仍然不必要地播放动画，所以，CPU (或者加速硬件？)虽然用户离开了页面，但动画仍在工作。
所以如果有人能回答我，我会很高兴的。
这是事实吗？
如果这是真的：
过渡是否也与这一问题有关？
暂停动画(如果涉及到转换)是否足以避免此问题？(我在考虑强制暂停一个onbeforeunload事件)或者我应该做另一件事吗？注意，我不想使用“悬停”来启动动画/转换。
PS:我仍然是CSS，javascript的新手，不懂其他语言
浏览 5提问于2013-07-05得票数 1
回答已采纳
2回答
我试图创建一个简单的动画，但在safari语法和标准语法之间出现了混淆。
我应该使用@-webkit-keyframes还是只使用@-keyframes？
所以我创建了一个div并在此基础上创建了一个动画。
Css：
.about4 {background-color: red;-webkit-animation-name:
aboutanimation; animation-name: aboutanimation;
animation-duration: 4s;} @-keyframes animationname
{from {background-color: red;} to
浏览 1提问于2019-10-29得票数 2
回答已采纳
我有一个简单的CSS动画，当动画从左上角移动到右下角的横幅画布(300x250)，但50%，我需要开始向左下角移动，然后100%结束移动它回到右下角，但作为新的css动画不确定如何做。有人知道这是否可能吗？
在这里做了一个小小的图表：
并举例：
.train-container {
position: relative;
}
.train {
position: absolute;
top: -350px;
left: -250px;
}
@keyframes moveTrain {
0% {
transform: translate(-185px,-159px
浏览 0提问于2015-11-09得票数 1
回答已采纳
1回答
我在css-loader中使用css模块时，偶然发现了一个问题。我有一个LoadingOverlay组件，它显示持续时间为ms的加载器。我在组件中使用以下代码在覆盖图上应用了淡入淡出动画：
if (show) {
return {
animation: `fade-out-long ${duration}ms ease-out forwards`
};
}
此样式对象将应用于覆盖节点。我这样做是因为持续时间是从父组件传递过来的prop。我的问题是，LoadingOverlay.scss是一个使用@include包含动画的scss模块，如下所示：
@import
浏览 12提问于2019-07-19得票数 2
1回答
我创建了一个动画，它在div中向下滚动一段文本，然后我想，如果动画方向(向上或向下)根据滚动方向动态变化(如果你向下滚动，文本也会向下滚动，如果你向上滚动，该文本就会改变方向并向上滚动)，那会很有趣。问题是，我不知道如何用jQuery来更改关键框架CSS。有什么解决办法吗？
@keyframes spam {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 100%);
}
}
和jQuery获得方向：
$(window).bind('mousewheel',
浏览 1提问于2019-02-12得票数 1
我需要你帮我加载动画。我使用了CSS3关键帧动画，除了Windows之外，它在主要浏览器Mac/PC上运行得很好。
我不知道我的代码有什么问题。请帮帮我
提前谢谢。
编辑:这里有一个链接-
.hemSpinner {
width: 50px;
height: 50px;
border-radius: 100%;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
color: #fcac45;
}
.hemLoader .hemSpinner:af
浏览 2提问于2015-07-29得票数 1
回答已采纳
我试图使用css制作一个振荡动画，如下所示：
下面是我制作动画的方法：
@keyframes rotateFeather {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-180deg);
}
50% {
transform: rotate(-90deg);
}
75% {
transform: rotate(90deg);
}
100% {
transform: r
浏览 5提问于2021-08-01得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
