css-animations相关内容
我有一个过渡动画,我想在group元素内的SVG元素的宽度上触发.该动画似乎只能在Chrome浏览器上运行.
..
..
我有一个动画画布,可以在背景上创建噪点效果.我的代码的简短说明如下:使用 for 循环,我在画布周围随机绘制了1px X 1px的正方形(点).它会产生静态噪音(颗粒).稍后,我用 requestAnimationFrame 对其进行动画处理. 我的问题是,如果将画布的原始大小设置为整个视口,则浏览器将无法处理巨大的绘图空间,并且动画会变得非常缓慢.因此,我需要将画布的原始尺寸保持较小,例如
..
我正在使用CSS制作背景图像淡入淡出动画,它在第一次循环运行时可以按预期工作,但是在整个过程中第二次卡在最后一张图像上,暂时跳到了第三张图像,然后回到最后一个. 如何更新它,使其在每个无限循环中顺利通过动画? #rotate {宽度:100%;高度:100%;位置:绝对;底部:0;正确:0;边距:0;填充:0;}#rotate li {动画:func 16s线性0s无限;list-s
..
我想为仅使用CSS的我的天气应用创建下雨效果.但是,即使我在外观上取得了令人满意的结果,我似乎也无法使它们连续覆盖整个屏幕,而不仅仅是随机覆盖整个屏幕-我将如何处理? body {溢出:隐藏;}#背景 {位置:绝对;最高:0;左:0;正确:0;底部:0;}#background.night {背景:线性渐变(#0F2129,#47334A);}#background> .cloud {宽度
..
我正在将我制作的Gif转换为CSS动画.一切都可以在Chrome,Firefox,Opera上运行,但在Safari上却可以运行. 最初加载页面时,图像会忽略平移并位于下面,但是一旦我从Safari选项卡中单击并返回时,页面就会更新,并且图像具有Translate给出的适当坐标. 有人知道为什么会这样吗? HTML:
..
我的pure-JS脚本只需使用 innerHTML 即可更改
元素内的文本.是否可以仅使用CSS设置此更改的动画,而无需使用jQuery?如果可以,怎么办? 谢谢! 解决方案 在设置innerHTML之前,向容器添加一些类,该类通过CSS设置动画前状态,然后设置innerHTML并删除该类.如果容器具有过渡设置,则应设置动画以使其处于清洁状态. .container {过
..
如果在小屏幕上有序列表使用 flex-direction:column 而在大屏幕上使用 flex-direction:row ,则CSS3动画或过渡可以为设置动画媒体查询之间的flex-direction 属性? 初始页面设置 html {框大小:border-box;}*,*:之前,*:之后{大小调整:继承;}身体 {字体大小:100%;}ol {显示:flex;flex-dir
..
我在chrome 75版本中发现了可能的问题(或者可能是feature =).变换动画期间变换原点的变化不会影响动画.我附加了snipet,其中包含两个循环,一个循环更改了变换,另一个循环更改了原点. 例如:
..
我想制作一个 div ,使其跟随光标,并同时随着动画的增长/缩小. 我使用 top 和 left 更改了 div 的位置,但动画有时有点断断续续. 我想使用 translate3d 使动画流畅,但我正在努力将 translate3d 与 scale 结合起来 const moveCursor = event =>{const cursorWidth = cursor.offsetWi
..
我正在尝试实现背景转换,当您单击某个选项卡时,当前选项卡的背景会滑到被单击的选项卡.有人可以帮忙吗? *,*:前,*:后 {框大小:border-box;}.radio_wrap {}输入 {位置:绝对;不透明度:0;}标签 {最小宽度:calc(100%/4);职位:相对向左飘浮;文本对齐:居中;文本阴影:无;内边距:20px;边框:1px实心#dfe0e4;颜色:灰色;font-siz
..
我无法使用类似于Pinterest的SVG精灵制作CSS动画.精灵是90帧,但我无法正常工作 Pinterest反应表情符号 在Svg中查看Pinterest Sprite 90帧 我的代码: .emoji {宽度:110像素;高度:110像素;背景图片:url(https://s.pinimg.com/webapp/style/images/wow-0a7ea725.s
..
我有一个DIV,当:hover时,它会将bgcolor变为蓝色.单击按钮添加将bgcolor设置为绿色的类.但是现在:hover无法正常工作(bgcolor不会变为蓝色). 为什么? http://jsfiddle.net/EstSiim/me7t055c/ HTML:
..
使用css @keyframes ,我试图在单击元素时将一些动画附加到元素上. .animate {animation-name:动作;动画时间:2秒;动画定时功能:线性;背景颜色:绿色;}@keyframes操作{0%{背景颜色:灰色;}50%{背景颜色:红色;}100%{背景颜色:绿色;}} 演示 在单击时添加 .animate 类,该框从灰色变为绿色.但是现在,当我再次单击它(
..
我想像这样将 inherit 与 calc()一起使用: #foo {动画时间:10秒;}#foo>.酒吧 {动画持续时间:calc(inherit + 2s);/* = 12秒*/} 但是它似乎不起作用. 是浏览器的错误还是规格? 解决方案 inherit 关键字只能作为值存在于属性声明中.它不能与其他作为值一起使用,因为它本身就是一个值.这意味着它也不能与 calc()之
..
是否有办法使动画延迟不仅在开始时发生,而且在迭代之间发生? 假设您有此示例: .lv1 {宽度:200像素;高度:200px;背景:红色;动画:流感1s无限;动画延迟:2秒;}.lv2 {背景:橙色;}.lv3 {背景:黄色;}.lv2,.lv3 {宽度:70%;高度:70%;动画:继承;}@keyframes流感{0%,100%{变换:rotate(0deg);}50%{转换:ro
..
我正在尝试使用CSS为SVG圆的radius属性设置动画.尽管(使用Firefox Inspect Element工具)可以看到动画本身已正确设置并运行,但是".innerCircle"的大小没有明显变化. 如果您能发现我显然错过的任何事情,或者以任何方式提供帮助,我将不胜感激.我对此很陌生,所以如果我犯了这个错误,请保持友善! 我已将文件粘贴在下面以供参考. 再次感谢.
..
我正在尝试使用svg实现CSS动画. 我预计2个svg框将以 transform-origin:center center; 360度旋转(旋转).看起来它的行为符合我对Chrome和Firefox的预期,但对macOS 10.12(高Sierra)以及iOS 11.0.x和11.1 beta Safari却没有.似乎 transform-origin:center center; 在Safar
..
我有一个 animate.css 的修改版(增加了一些延迟,新的时间安排和新的职位),并且在默认情况下设置类(html文档)时,它的工作原理非常好.但是当我通过js动态添加动画类时,不会执行动画! 更烦人的是,我确实在某个时候可以使它工作,但是我无法使其再次工作(当元素在屏幕上时使用gumby框架和inview js添加一个类(添加.animated)).左框具有html中已经存在的类,右框
..
为什么动画会更改z-index? 如果您查看jsfiddle,您会看到红色图像位于顶部,但是如果您注释掉动画,则蓝色图像位于顶部.即使使用动画,如何使蓝色图像始终位于最上方? jsfiddle HTML
..