我需要帮助来使用gsap staggerFromTo()对我的Web项目进行动画处理
我想使用 staggerFromTo()属性一一弹出缩略图. 这是我的HTML代码.
..
css-animations相关内容
将var添加到CSS类
我当前正在编写一个循环制作动画的组件，动画时间是传递给该组件的道具. 我的问题如下:动画是用CSS制作的: 动画:{-webkit-transition:10.0s！important;-moz-transition:10.0秒！重要；-o-transition:10.0秒！重要；过渡:10.0s！重要;} 我想在该类声明中传递持续时间，但是似乎不可能，并且我正在使用以下CSS技巧重新
..
每次旋转之间暂停动画五秒钟
我正在制作这个演示.如何在每次旋转之间将此动画添加五秒钟的延迟? .card {背景:#00f；宽度:100px；高度:100px；动画:无限旋转4s；-webkit-animation:无限旋转4s；}@ -webkit-keyframes旋转{100％{变换:rotate(90deg);}}@keyframes旋转{50％{变换:rotate(-90deg);}}
..
具有淡入/淡出延迟的CSS幻灯片
我制作了一个CSS幻灯片演示，其中包含3个由关键帧动画的图像，从而产生淡入/淡出效果.到目前为止，一切顺利.但是幻灯片第二个循环中的动画存在问题. 我要解释我的最好的情况:第一个循环动画效果很好，但是一旦第一个图像再次出现，我想避免的所有幻灯片都会变成白色. 我不明白为什么第一个循环会完美运行，然后其他循环会逐渐淡化为白色.您可以在代码段中看到此问题. 真的很感谢您！ .
..
平滑设置页眉动画
我正在尝试制作与这些标头之一类似的东西，以减小尺寸，并在页面开始向下滚动时使元素滑动.所不同的是，我见过的大多数此类标头都有一个带有背景色的大标头，我的客户希望徽标位于导航栏的单独空间中.顶部有一个空格，上面只有徽标，然后是带有背景色的导航栏.因此，我试图将导航栏固定在滚动条的顶部，并将徽标滑动到其他位置.我已经尝试过动画和转场，但是滚动仍然很震撼. 以下是一些当前代码，这些代码使用jQue
..
无限滑动CSS3渐变
我有一个简单的动画，它对角地来回跳动，我希望它不断滑动而不是来回跳动.这是我的代码: body {margin:0;填充:0；}.error-con {背景:rgba(255，0，89，1);背景:-moz-linear-gradient(45deg，rgba(255，0，89，1)0％，rgba(0，179，255，1)100％);背景:-webkit-gradient(左下，右上，色标
..
CSS动画(位置)不流畅
我做了一个微妙的背景运动，但效果却不那么令人满意.有点晃动时，您可以看到图像逐像素移动. 如何更改它，使其成为一个很好的平滑动画. 代码( https://jsfiddle.net/38tf0j21/): body {内边距:50px;边距0;高度:100vh；}.landing_img_container {位置:绝对；正确:0；宽度:calc(100％-100px);高度:
..
SVG pathLength在Safari上不起作用
我正在尝试使用SVG和CSS动画制作一些不断增长的线条动画.由于行的长度分别不同，因此我使用 pathLength 为它们分配虚拟长度.因此，我只能对它们全部使用一个 @keyframe . 这是示例代码
..
伪元素的CSS动画可在Chrome和IE中使用，但在Safari和Firefox中是固定的，没有"position:absolute"
使用此HTML:
测试1
& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;测试2 这个CSS: .icon-spinner:before {动画:旋转0.5秒
..
使用图像标签加载svg时，无法播放从悬停开始的svg动画
我有以下动画: https://svgur.com/i/6XH.svg 如果单击该链接，则将鼠标悬停在该链接上就会开始播放. 但是，当我使用image标记将svg加载到页面上时(如下所述)，悬停事件似乎没有到达svg图像.
..
CSS键入眨眼动画
我在CSS中制作了打字动画.我有一个问题，这封信没有完全显示出来.尝试使"m"成为一个字母，同时使动画看起来更自然.它需要看起来像有人在打字.需要帮助为“反射镜"中的每个字母分别设置动画，并使其看起来像是在打字，因此每个按键的输入时间都稍短. https://codepen.io/shahil/pen/ZEGwMxQ @ font-face {字体家族:danub;src:url(h
..
继续播放无限的CSS动画，直到最后一帧为止
我有一个已定义的CSS类 spin ，可在一个元素上创建一个简单的CSS动画微调器 @keyframes旋转{来自{变换:rotate(0deg);}到{转换:rotate(360deg);}}.旋转 {动画:自旋.8s线性.15s无限；} spin 类是通过JavaScript添加和删除的，但是，删除该类时，动画会突然剪切并显示第一帧.是否有办法让浏览器继续为元素设置动画，直到到达最后一
..
CSS动画在IE/Edge中不起作用
这东西在IE/Edge中如何工作?我不明白为什么没有. 当我向元素添加类时，其边框将变为虚线并开始旋转. $(“#btn").click(function(){$(“.bg")[0] .classList.toggle("rotate");}) @keyframes PDFgenerate {至 {-moz-transform:旋转(360deg)；-ms-transform:
..
是否可以为flexbox的插入，移除和项目位置设置动画?
该问题最初是在2012年问到的提供的答案没有涵盖我感兴趣的用例(包装的内容更改行的平滑移动). "“当我从Flexbox中删除一个项目时，其余的项目会“捕捉"到他们的新职位，而不是动起来. 从概念上讲，由于项目正在改变其位置，我会希望过渡会适用. 我已在所有涉及的元素(flexbox和孩子们) 有什么方法可以使对动画的编辑(添加和删除)动画化?" 我对使包装到其他行/
..
使用SVG animateTransform旋转SVG中已翻译SVG内的路径
这是我之前问的一个问题的后续内容，使HTML Canvas生成可用于PDF的艺术线条吗?.在@Peter O.的建议下，我重新设计了软件，使其使用SVG而不是HTML Canvas.我现在能够创建高质量的图像: 整个对象都有一个外部 .每个视图都有一个翻译后的 .而是将箭头绘制为路径. 以下是产生箭头的相关代码: transformForPiece(p){返
..
双向CSS高度动画
@keyframes mgm {从 {max-height:250像素；}至 {max-height:0px;}}.mgm {宽度:180像素；边框:1px纯黑色；内边距:10px;动画:mgm 1s缓入；max-height:250像素；溢出:隐藏}
Lorem ipsum dolor坐着，自学成才.Recusandae，百日草极大的别名doloru
..
为什么蓝色圆圈未在其中心旋转
为什么蓝色圆圈没有在其自身轴线的中心旋转?您可以在下面找到我以前的代码. 在这里您可以看到带有 SVG 比例的我的 CSS : circle {动画:无限增长2s；transform-origin:中心;}@keyframes成长{0％{转换:scale(1);}50％{转换:scale(0.5);}100％{转换:scale(1);}}
..
如何在没有JavaScript的情况下设置CSS动画速度?
这个问题与CSS动画的速度有关. .div1 {边距:10px;宽度:300像素；背景:#A1BDAF；空白:nowrap;溢出:隐藏；}.内容{白颜色;最小宽度:100％；显示:inline-block;动画:向前移动4s轻松进出；过渡:宽度线性；}@关键帧移动{从{-webkit-transform:translateX(0);转换:translateX(0);左边距:0；}至{-we
..
CSS动画:可以在Chrome浏览器中使用，但不能在Firefox中使用吗?
在旋转动画中，可在Chrome中工作，但在Firefox中不工作.为什么? @-moz-关键帧旋转{来自{-moz-transform:旋转(0deg);}到{-moz-transform:旋转(360deg);}}@ -webkit-keyframes旋转{来自{-webkit-transform:旋转(0deg);}到{-webkit-transform:旋转(360deg);}}#例子
..
CSS动画填充模式和z-index问题
我正在研究的项目中使用CSS动画(来自animate.css).我发现，当在一个带有绝对位置且z索引子级的容器中褪色时，该子级的z索引无法正常工作. 我在这个小提琴中重新创建了这个问题: http://jsfiddle.net/Lxsf9ako/ 问题似乎是由 引起的 animation-fill-mode:两者； 此样式由animate.css放置在容器上，因此我对此无法控
..