css-animations相关内容

重复HTML画布元素(框)以填充整个视口

我有一个动画画布，可以在背景上创建噪点效果.我的代码的简短说明如下:使用 for 循环，我在画布周围随机绘制了1px X 1px的正方形(点).它会产生静态噪音(颗粒).稍后，我用 requestAnimationFrame 对其进行动画处理. 我的问题是，如果将画布的原始大小设置为整个视口，则浏览器将无法处理巨大的绘图空间，并且动画会变得非常缓慢.因此，我需要将画布的原始尺寸保持较小，例如 ..
发布时间：2021-04-26 20:33:44 前端开发

CSS Image Fade动画仅在第一次运行

我正在使用CSS制作背景图像淡入淡出动画，它在第一次循环运行时可以按预期工作，但是在整个过程中第二次卡在最后一张图像上，暂时跳到了第三张图像，然后回到最后一个. 如何更新它，使其在每个无限循环中顺利通过动画? #rotate {宽度:100％;高度:100％;位置:绝对；底部:0;正确:0；边距:0;填充:0;}#rotate li {动画:func 16s线性0s无限；list-s ..
发布时间：2021-04-26 20:20:55 前端开发

如何到处都下雨?

我想为仅使用CSS的我的天气应用创建下雨效果.但是，即使我在外观上取得了令人满意的结果，我似乎也无法使它们连续覆盖整个屏幕，而不仅仅是随机覆盖整个屏幕-我将如何处理? body {溢出:隐藏；}#背景 {位置:绝对；最高:0;左:0；正确:0；底部:0;}#background.night {背景:线性渐变(#0F2129，#47334A);}#background> .cloud {宽度 ..
发布时间：2021-04-26 20:15:47 前端开发

Safari上的CSS翻译问题

我正在将我制作的Gif转换为CSS动画.一切都可以在Chrome，Firefox，Opera上运行，但在Safari上却可以运行. 最初加载页面时，图像会忽略平移并位于下面，但是一旦我从Safari选项卡中单击并返回时，页面就会更新，并且图像具有Translate给出的适当坐标. 有人知道为什么会这样吗? HTML: ..
发布时间：2021-04-26 20:12:14 前端开发

是否可以仅使用CSS动画化对innerHTML的更改?

我的pure-JS脚本只需使用 innerHTML 即可更改 元素内的文本.是否可以仅使用CSS设置此更改的动画，而无需使用jQuery?如果可以，怎么办? 谢谢！ 解决方案 在设置innerHTML之前，向容器添加一些类，该类通过CSS设置动画前状态，然后设置innerHTML并删除该类.如果容器具有过渡设置，则应设置动画以使其处于清洁状态. .container {过 ..
发布时间：2021-04-26 20:07:28 前端开发

可以在flex-direction属性上使用CSS动画或过渡吗?

如果在小屏幕上有序列表使用 flex-direction:column 而在大屏幕上使用 flex-direction:row ，则CSS3动画或过渡可以为设置动画媒体查询之间的flex-direction 属性? 初始页面设置 html {框大小:border-box；}*，*:之前，*:之后{大小调整:继承；}身体 {字体大小:100％；}ol {显示:flex;flex-dir ..
发布时间：2021-04-26 20:06:06 前端开发

使用translate3d和scale进行转换

我想制作一个 div ，使其跟随光标，并同时随着动画的增长/缩小. 我使用 top 和 left 更改了 div 的位置，但动画有时有点断断续续. 我想使用 translate3d 使动画流畅，但我正在努力将 translate3d 与 scale 结合起来 const moveCursor = event =>{const cursorWidth = cursor.offsetWi ..
发布时间：2021-04-26 19:56:58 前端开发

选项卡背景色幻灯片过渡到下一个选项卡

我正在尝试实现背景转换，当您单击某个选项卡时，当前选项卡的背景会滑到被单击的选项卡.有人可以帮忙吗? *，*:前，*:后 {框大小:border-box；}.radio_wrap {}输入 {位置:绝对；不透明度:0；}标签 {最小宽度:calc(100％/4);职位:相对向左飘浮;文本对齐:居中；文本阴影:无；内边距:20px;边框:1px实心#dfe0e4;颜色:灰色；font-siz ..
发布时间：2021-04-26 19:42:45 前端开发

css3:悬停动画后将无法工作

我有一个DIV，当:hover时，它会将bgcolor变为蓝色.单击按钮添加将bgcolor设置为绿色的类.但是现在:hover无法正常工作(bgcolor不会变为蓝色). 为什么? http://jsfiddle.net/EstSiim/me7t055c/ HTML: ..
发布时间：2021-04-26 19:40:30 前端开发

点击即可来回运行CSS动画

使用css @keyframes ，我试图在单击元素时将一些动画附加到元素上. .animate {animation-name:动作；动画时间:2秒；动画定时功能:线性；背景颜色:绿色；}@keyframes操作{0％{背景颜色:灰色；}50％{背景颜色:红色；}100％{背景颜色:绿色；}} 演示 在单击时添加 .animate 类，该框从灰色变为绿色.但是现在，当我再次单击它( ..
发布时间：2021-04-26 19:39:25 前端开发

如何将CSS calc()与继承一起使用?

我想像这样将 inherit 与 calc()一起使用: #foo {动画时间:10秒；}#foo>.酒吧 {动画持续时间:calc(inherit + 2s);/* = 12秒*/} 但是它似乎不起作用. 是浏览器的错误还是规格? 解决方案 inherit 关键字只能作为值存在于属性声明中.它不能与其他作为值一起使用，因为它本身就是一个值.这意味着它也不能与 calc()之 ..
发布时间：2021-04-26 19:36:39 前端开发

关键帧之间的延迟

是否有办法使动画延迟不仅在开始时发生，而且在迭代之间发生? 假设您有此示例: .lv1 {宽度:200像素；高度:200px；背景:红色；动画:流感1s无限；动画延迟:2秒；}.lv2 {背景:橙色；}.lv3 {背景:黄色；}.lv2，.lv3 {宽度:70％;高度:70％;动画:继承；}@keyframes流感{0％，100％{变换:rotate(0deg);}50％{转换:ro ..
发布时间：2021-04-26 19:35:43 前端开发

使用CSS动画调整SVG圆半径的大小

我正在尝试使用CSS为SVG圆的radius属性设置动画.尽管(使用Firefox Inspect Element工具)可以看到动画本身已正确设置并运行，但是".innerCircle"的大小没有明显变化. 如果您能发现我显然错过的任何事情，或者以任何方式提供帮助，我将不胜感激.我对此很陌生，所以如果我犯了这个错误，请保持友善！ 我已将文件粘贴在下面以供参考. 再次感谢. ..
发布时间：2021-04-26 19:29:28 前端开发

通过js添加类不会触发CSS动画

我有一个 animate.css 的修改版(增加了一些延迟，新的时间安排和新的职位)，并且在默认情况下设置类(html文档)时，它的工作原理非常好.但是当我通过js动态添加动画类时，不会执行动画！ 更烦人的是，我确实在某个时候可以使它工作，但是我无法使其再次工作(当元素在屏幕上时使用gumby框架和inview js添加一个类(添加.animated)).左框具有html中已经存在的类，右框 ..
发布时间：2021-04-26 19:23:48 前端开发