css-animations相关内容

如何使用线性渐变创建无限的背景图案动画?

我正在尝试创建一个动画重复图案(水平滑动的对角条纹)，作为加载块(在这种情况下为 li )的占位符. 如何使动画平滑/连续，以使幻觉图案无限滑动? 如何计算元素 width 以便图案连续?(条纹不应看起来破碎/打断). 如何使它看起来像不是在重新启动而是无限滑动地循环?(100％的帧应无任何毛刺地传递到0％的帧) 目标是要有一个我可以添加到任何块中的类，并且在外观上看起来像加载 ..
发布时间：2021-04-26 19:04:10 前端开发

使用CSS旋转行星

我有一个项目，我在其中创建一些行星，它们需要旋转.我是一个正在上学的初学者.我找到了一些可旋转的代码，但它开始跳过.另一种方法是让它交替旋转，但是看起来不正确. 如何使用CSS修复此问题? .earth {宽度:300像素；高度:300像素；位置:固定；最高:0;底部:0;左:0；正确:0；保证金:自动；溢出:隐藏；边界半径:50％；box-shadow:0 0 20px 20px# ..
发布时间：2021-04-26 19:04:03 前端开发

CSS Scale动画还会将图像向左移动吗?

我试图制作一个使用CSS动画的图片库，但出现了一些奇怪的效果.我有一个较小的缩略图图像开始，当我将鼠标悬停在它上面时，我希望它缩放到两倍大小.该部分有效，但也使其向左移动，最终移到屏幕边缘.我应该怎么做才能解决它? .飞涨 {过渡:1s由内而外；}.zoom:hover {transform:scale(2);} ..
发布时间：2021-04-26 19:02:10 前端开发

在animation-fill-mode之后，如何再次对元素进行动画处理?

因此，我有一个元素网格，并且将它们设置为在页面加载时一个接一个地淡入淡出. 因此从一个元素到下一个元素从不透明度0到不透明度1的延迟为0.2s. 然后我希望突出显示网格部分时这些元素中的图像增加，但是我的动画填充模式阻止了这种情况. 有什么可解决的地方吗? //将鼠标悬停时展开..main-image {过渡:转换.2s缓入缓出；}#portfolio:悬停#portfolio ..
发布时间：2021-04-26 19:00:03 前端开发

通过JS触发的CSS动画仅隔两下播放一次

我想制作一个简单的JavaScript onclick动画.我的问题是，当我单击按钮时，将执行动画，但是当我再次单击按钮时，什么也没有发生.在第三次单击时，动画再次播放.我要这样做，动画在第二次单击时播放.这是我的代码" var anim = document.getElementById("anim");anim.onclick =函数highA(){var willCheck = do ..
发布时间：2021-04-26 18:58:06 前端开发

如何在不使用背景位置的情况下为线性渐变设置动画?

我正在尝试创建内容加载器，但是背景动画出现性能问题.当屏幕上只有几个元素时，它很平滑，但是当存根元素数增加到20-30时，它会急剧降低fps.现在，我知道动画背景位置属性是个坏主意，最好对此使用转换.但是我该怎么办呢?我想保持无缝动画.渐变应相对于屏幕而不是容器. 这是一些代码: const cardsRoot = document.getElementById('cards')co ..
发布时间：2021-04-26 18:51:10 前端开发

为什么在具有范围样式的Vue组件中破坏了CSS关键帧动画?

我正在尝试在Vue中实现CSS输入指示器.没有Vue，它看起来像这样: .typing-indicator {背景颜色:#E6E7ED;宽度:自动;border-radius:50px;内边距:20px;显示:表；保证金:0自动;职位:相对-webkit-animation:2s凸出无限缓和；动画:2秒膨胀无限缓和；}.typing-indicator:之前，.typing-indicat ..
发布时间：2021-04-26 18:49:58 前端开发

如何实现多行文本加载动画?

我正在尝试仅使用 CSS 来实现文本加载动画.我所拥有的是黑色文本，那么当页面加载时，文本将在几秒钟内开始用红色填充. 我面临的问题是，加载文本的动画工作正常，但是当文本结束并以新行开头时，动画文本仍将继续在同一行上. 我该如何解决? body {背景:#3498db；字体家族:sans-serif;}h1 {职位:相对颜色:rgba(0，0，0，.3);字号:5em；空格:换 ..
发布时间：2021-04-26 18:45:47 前端开发

CSS从右到左@keyframes转换:-100％不转换

我很难找到导致问题的原因.感谢您的帮助.在网站中，我将html文本方向设置为从右到左，因为该网站使用阿拉伯语.并且有css动画，它们都正常运行.除非满足以下条件:当html文本方向从右到左并且我正在移动设备上浏览网站时.或使用谷歌浏览器中的设备切换选项.加载页面时，它将加载在设置为-100％左侧的div上，而不是加载内容，并且-100％的div位于页面的中间.这给人一种错觉，那就是整个网页都是从右 ..
发布时间：2021-04-07 20:07:59 前端开发

动画时长在Safari中表现不正常

我们正在一个简单的项目中使用CSS动画.我们正在尝试使用JavaScript更改动画持续时间.除了野生动物园和iOS外，更改动画持续时间都适用于所有浏览器. 我们正在使用此代码来更改动画持续时间. document.getElementById("circle").style.animationDuration = data.pulse +"ms"document.getElementB ..
发布时间：2021-04-07 20:07:09 前端开发

CSS3关键帧循环滑块?

人们怎么了..我一直在这个奇妙的Css3关键帧世界中训练自己.我已经看到了几种使用100％CSS制作滑块的方法，但是我正在寻找与众不同的方法.我想做的是一个滑块，它在移动时同时移动其所有图片(它们对用户都是可见的)，同时，当第一张图片不可见时(例如，左侧)，它应该是从右边传来的，与其他图片一样..直到大地停下来:D.我想做什么是可以理解的?但是我不知道该怎么做.请帮忙！谢谢你的帮助.这是一些代码: ..
发布时间：2021-04-07 20:05:24 前端开发

CSS动画淡入暂停....淡出

我正在尝试使一些(将是图像)块在暂停中淡出几秒钟，然后淡出.... 到目前为止，我已经了解了它，但是它似乎并不想消失，我不确定我要去哪里错了. 淡出后，再次显示. 我有一个小提琴，它非常基本地显示了它. /*定义动画关键帧*/@ -webkit-keyframes淡入{0％{不透明度:0；}72％{不透明度:0；}100％{不透明度:1；}}@ -moz-keyframes淡入 ..
发布时间：2021-04-07 20:00:57 前端开发

导航栏随CSS动画一起消失

我正在使用Animate.css库中的CSS3动画.当我将它们与WOW.js结合使用 时，它们确实很棒，并且可以完美地工作 但是，当我向下滚动页面并且动画进入屏幕时，我在屏幕顶部的固定导航栏消失了几秒钟，即显示动画的时间，然后又回到了屏幕中 如何避免这种情况发生?我不希望我的固定导航栏消失. 解决方案 有几种不同的方法可以解决此问题. 1.)第一个(对我不起作用)是附加的: ..
发布时间：2021-04-07 19:59:21 前端开发

CSS动画重复之间的延迟

我正在尝试创建一个动画，每个字母分别移动，效果很好，但是当我添加无限时，循环之间没有延迟，因此字母不断地一个接一个地移动.我试图在基本动画上添加动画延迟，但这只会减慢动画速度. @keyframes move { 0% { transform: translateY(0) } 100% { transform: transla ..
发布时间：2020-11-27 20:59:25 前端开发