css-animations 相关问题

CSS线性渐变进度动画

我制作了一个动画，指示倒计时直到吐司通知消失： .toastDiv { 动画：toastProgress 3s 缓动； 边框: 1px 实心 rgba(0, 0, 0, .5); 博...

我无法使用精灵右侧的steps()获得CSS动画

我正在尝试为 5 个精灵的小仓鼠制作动画： 我是 CSS 动画新手，无法正确理解它。有 5 个精灵，我要求从 0% 到 100% 5 个步骤 https://codepen.io/Offirmo/pen/ZE...

为什么动画播放后图像消失了？

出于某种原因，动画完成后图像消失了？ :/ .硬币{ 宽度：200px； 高度：200px； 背景大小：封面； 动画：CoinflipRoll 6s 步骤（199）； 阿尼...

为什么动画（CSS）后图像消失了？

出于某种原因，动画完成后图像会消失吗？ :/ .硬币{ 宽度：200px； 高度：200px； 背景大小：封面； 动画：CoinflipRoll 6s 步骤（199）； 阿尼...

CSS边框颜色切换动画：“from”颜色不正确

我构建了一个CSS动画，其中一部分是改变div的边框颜色。 我正在使用 from 和 to 值。边框应该闪烁白色和蓝色，但我得到的不是白色而是浅蓝色。 我建了一个

圣诞灯循环效果

我正在尝试使用 CSS -webkit-animation 属性创建一些圣诞灯（在一月份）。 为此，我使用这张图片： 我尝试过： @-webkit-keyframes 灯 { 0% { 背景...

关键帧动画无法在 Firefox 上播放

我的 css 动画在 Edge 和 Chrome 上按照我想要的方式工作，但拒绝在 Firefox 上初始化，我尝试过为动画和关键帧属性添加 -moz- 和 -keyframes- 标签...

如何创建一个旋转动画，在每个周期中连续切换方向？

我有以下六边形的 svg 和旋转动画，目前仅向 1 个方向移动。我将如何调整它，以便它在每个动画周期后旋转另一个方向...

继续 CSS 动画循环

我有一个动画进度条，我使用animation-iteration-count CSS属性来指定百分比进度。因此，如果进度应该为 50%，我设置animation-iteration-count: 0.5。开

将动画应用到光滑幻灯片

我想将这些图像之间的过渡应用到我的 Slick 幻灯片上，以便我可以控制。 动画示例（基本上是同时淡入淡出和移动）：https://jsfiddle.net/bg90fa...

Laggy/Glitchy CSS 动画仅适用于带有 Intersection Observer 的 Firefox

我正在利用 Intersection Observer API 在网站标题徽标未位于（或接近位于）背景图像上方时隐藏网站标题徽标。 在 Google Chrome、其他 chromium 浏览器和 Safa 上运行良好...

如何使用 width: auto 转换内容的宽度？

我有一个元素，我想在其内容更改时为其宽度设置动画。它的宽度：自动，并且永远不会改变。我见过这个技巧，但那是为了在两个值和一个值之间转换......

如何使用animation-timeline属性添加延迟或平滑滚动驱动的动画？

我目前正在使用CSS滚动驱动的动画和新的animation-timeline属性。我所指的技术示例可以在这里查看：图像显示示例。 然而，我面临着一个

基于不同元素的视图时间线的动画

我正在尝试根据元素 A 上设置的视图时间线属性对元素 B 进行动画处理。使用视图时间线，可以根据元素在视口中的位置调用动画，如果视图-

Shopify 自定义动画 css 仅适用于 ios 设备，但适用于网络和 Android 设备

Shopify 自定义动画 css 仅适用于 ios 设备，但适用于网络和 Android 设备。 我的 Shopify 代码： {{“MyLandAnimation.css”|资产网址 |样式表标签}} Shopify 自定义动画 css 仅适用于 ios 设备，但适用于网络和 Android 设备。 我的 Shopify 代码： {{ "MyLandAnimation.css" | asset_url | stylesheet_tag }} <div class="myContainer"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> <defs> <g id="path-1"> <path d="M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306z" class="hair hair-main"></path> </g> <g id="path-2"> <path d="M0 12s-12.8 3-13.9-12c0 0 14.2-1.8 13.9 12z" class="leaf-2" /> <path d="M0 12s-12.8 3-13.9-12c0 0 3.9 2.9 7 5.6a71.5 71.5 0 0 1 6.9 6.4z" class="leaf-1" /> </g> <g id="path-3"> <path d="M24 12s-5.3 9.3-14.8 1.5c0 0 6.8-9.4 14.8-1.5z" class="leaf-4" /> <path d="M24 12s-5.3 9.3-14.8 1.5c0 0 3.8-.7 7.2-1a57.3 57.3 0 0 1 7.6-.5z" class="leaf-3" /> </g> </defs> <use xlink:href="#path-1" x="0" y="0" /> <g transform="translate(300, 0) scale(-1, 1) translate(-300, 0)"> <use xlink:href="#path-1" x="0" y="0" /> </g> <g transform="translate(195, 233) scale(-1,1) translate(-195, -233)"> <g> <use href="#path-2" x="195" y="235" /> <animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="6,185, 233" to="-12,185, 233" dur=".75s" begin="0s;anim2.end" /> <animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,185, 233" to="6,185, 233" dur=".75s" begin="anim1.end" /> </g> </g> <g transform="translate(195, 233) scale(-1,-1) translate(-195, -233)"> <g> <use href="#path-2" x="195" y="233" /> <animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="2,185, 233" to="-12,185, 233" dur=".75s" begin="0s;anim2.end" /> <animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,185, 233" to="2,185, 233" dur=".75s" begin="anim1.end" /> </g> </g> <g> <use href="#path-2" x="410" y="235" /> <animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="2,400, 235" to="-12,400, 235" dur=".75s" begin="0s;anim2.end" /> <animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,400, 235" to="2,400, 235" dur=".75s" begin="anim1.end" /> </g> <g transform="translate(410, 233) scale(1,-1) translate(-410, -233)"> <g> <use href="#path-2" x="410" y="233" /> <animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="6,400, 233" to="-12,400, 233" dur=".75s" begin="0s;anim2.end" /> <animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,400, 233" to="6,400, 233" dur=".75s" begin="anim1.end" /> </g> </g> <use xlink:href="#path-3" x="174" y="222" /> <use xlink:href="#path-3" x="398" y="222" /> <path class="text" fill-rule="evenodd" transform="translate(220, 215)" d="M 0 0.361 L 0 30.871 L 9.855 30.871 L 9.855 30.016 C 9.855 18.946 1.98 24.526 1.17 4.006 C 2.056 6.842 2.288 7.409 3.542 11.639 A 493.23 493.23 0 0 1 3.6 11.836 A 8.942 8.942 0 0 0 4.473 13.833 C 7.457 18.82 14.04 17.572 14.04 24.391 L 15.165 24.391 C 15.165 16.786 23.355 19.216 25.605 11.836 C 26.865 7.516 27.09 6.886 27.945 4.141 A 65.034 65.034 0 0 1 27.695 7.873 C 26.135 23.857 19.35 19.681 19.35 30.016 L 19.35 30.871 L 29.205 30.871 L 29.205 0.361 L 28.035 0.361 A 34.377 34.377 0 0 0 24.001 0.569 C 20.661 0.999 18.298 2.315 16.98 6.369 A 15.409 15.409 0 0 0 16.875 6.706 C 15.66 10.846 15.795 10.171 14.805 13.726 C 14.715 14.041 14.625 14.356 14.58 14.671 L 14.355 13.726 C 13.41 10.171 13.545 10.846 12.285 6.706 C 10.583 0.935 6.889 0.411 1.415 0.365 A 167.965 167.965 0 0 0 0 0.361 Z M 135.63 6.526 L 134.46 6.526 A 35.99 35.99 0 0 0 134.346 7.769 C 133.897 13.889 135.514 16.085 138.723 16.315 A 8.367 8.367 0 0 0 139.32 16.336 A 4.994 4.994 0 0 0 140.784 16.135 C 144.313 15.059 143.658 9.941 145.231 8.15 A 1.741 1.741 0 0 1 146.07 7.606 A 4.518 4.518 0 0 1 146.736 7.465 C 149.117 7.161 150.212 9.442 149.22 16.921 A 26.765 26.765 0 0 0 147.152 16.77 A 47.213 47.213 0 0 0 145.395 16.741 A 32.262 32.262 0 0 0 141.156 16.994 C 138.166 17.393 135.999 18.257 134.635 19.565 A 5.736 5.736 0 0 0 132.885 23.896 C 132.885 28.254 136.108 30.742 143.152 31.024 A 34.774 34.774 0 0 0 144.54 31.051 C 148.32 31.051 149.49 29.836 149.76 28.126 A 6.217 6.217 0 0 0 151.367 29.87 C 155.008 32.515 160.871 30.217 163.973 27.053 A 10.155 10.155 0 0 0 164.835 26.056 L 164.16 25.336 A 6.91 6.91 0 0 1 163.822 25.652 C 162.611 26.711 161.388 26.967 160.365 26.287 A 2.751 2.751 0 0 1 160.065 26.056 A 3.985 3.985 0 0 1 158.755 23.415 C 158.582 22.068 158.795 20.403 159.12 18.406 C 160.017 12.806 157.622 8.38 152.687 6.818 A 14.008 14.008 0 0 0 148.455 6.211 C 143.546 6.211 140.743 9.126 138.048 9.426 A 3.955 3.955 0 0 1 137.61 9.451 C 136.27 9.451 135.736 8.424 135.645 7 A 7.425 7.425 0 0 1 135.63 6.526 Z M 66.15 11.161 L 66.87 11.881 A 6.443 6.443 0 0 1 67.397 11.407 C 68.632 10.417 69.902 10.255 70.965 11.161 A 3.985 3.985 0 0 1 72.275 13.801 C 72.448 15.149 72.235 16.813 71.91 18.811 A 14.909 14.909 0 0 0 71.729 20.625 C 71.557 25.335 73.847 28.999 78.22 30.415 A 14.117 14.117 0 0 0 82.575 31.051 C 93.093 31.051 97.615 13.463 95.313 7.484 A 4.417 4.417 0 0 0 94.815 6.526 L 81.765 6.526 A 8.964 8.964 0 0 1 84.476 8.909 C 88.601 14.114 90.358 24.562 87.09 28.224 A 3.809 3.809 0 0 1 84.375 29.521 A 4.05 4.05 0 0 1 84.112 29.53 C 82.198 29.53 80.668 28.013 81.872 19.576 A 65.651 65.651 0 0 1 81.945 19.081 C 82.393 16.048 82.735 13.068 81.921 10.606 A 7.012 7.012 0 0 0 80.82 8.506 C 77.338 4.163 70.535 6.646 67.07 10.114 A 10.413 10.413 0 0 0 66.15 11.161 Z M 44.46 6.526 L 44.46 30.871 L 54.315 30.871 L 54.225 11.071 A 7.005 7.005 0 0 1 54.295 10.023 C 54.455 8.979 54.903 8.323 55.8 8.461 A 1.718 1.718 0 0 1 57.031 9.403 C 58.274 11.507 58.206 16.336 62.91 16.336 C 66.565 16.336 68.658 14.199 68.445 7.493 A 34.164 34.164 0 0 0 68.4 6.526 L 67.23 6.526 C 67.23 8.085 66.796 9.29 65.52 9.436 A 2.373 2.373 0 0 1 65.25 9.451 A 1.888 1.888 0 0 1 64.483 9.296 C 62.998 8.651 62.53 6.211 57.96 6.211 A 5.975 5.975 0 0 0 56.408 6.408 C 53.95 7.064 52.693 9.159 50.43 9.768 A 4.815 4.815 0 0 1 50.04 9.856 C 47.831 10.257 46.017 10.05 45.652 7.538 A 7.059 7.059 0 0 1 45.585 6.526 L 44.46 6.526 Z M 106.02 19.891 C 122.22 15.931 121.86 6.211 109.98 6.211 A 15.626 15.626 0 0 0 103.589 7.486 C 99.198 9.445 96.525 13.515 96.525 18.676 A 12.482 12.482 0 0 0 98.658 25.877 C 100.286 28.226 102.777 29.918 105.89 30.7 A 16.776 16.776 0 0 0 109.98 31.186 C 116.312 31.186 119.211 29.219 122.641 25.464 A 60.933 60.933 0 0 0 123.48 24.526 A 22.275 22.275 0 0 1 123.122 24.153 C 122.965 23.989 122.802 23.822 122.625 23.671 A 15.953 15.953 0 0 1 120.397 25.734 C 116.143 28.925 111.677 28.037 107.444 22.086 A 28.245 28.245 0 0 1 106.605 20.836 A 8.787 8.787 0 0 1 106.156 20.127 A 40.578 40.578 0 0 1 106.02 19.891 Z M 121.32 0.361 L 121.32 30.871 L 131.175 30.871 L 131.175 7.606 A 4.191 4.191 0 0 0 131.015 6.393 C 129.83 2.464 122.445 6.114 122.445 0.361 L 121.32 0.361 Z M 31.905 30.871 L 41.76 30.871 L 41.76 15.391 A 4.059 4.059 0 0 0 41.595 14.178 C 41.047 12.424 39.224 12.181 37.406 11.938 A 44.129 44.129 0 0 1 36.675 11.836 C 34.11 11.431 32.625 10.666 31.905 9.721 L 31.905 30.871 Z M 42.615 5.401 C 42.615 2.206 40.32 0.001 36.855 0.001 A 6.683 6.683 0 0 0 34.139 0.538 C 32.303 1.35 31.17 3.029 31.099 5.184 A 6.57 6.57 0 0 0 31.095 5.401 A 5.336 5.336 0 0 0 32.041 8.532 C 32.732 9.505 33.774 10.209 35.075 10.541 A 7.187 7.187 0 0 0 36.855 10.756 A 6.717 6.717 0 0 0 39.539 10.233 C 41.448 9.405 42.606 7.654 42.615 5.427 A 6.457 6.457 0 0 0 42.615 5.401 Z M 149.085 17.956 L 149.085 18.136 A 40.201 40.201 0 0 0 148.631 22.085 A 29.08 29.08 0 0 0 148.59 22.996 C 148.59 25.437 148.875 28.164 148.178 29.085 A 0.81 0.81 0 0 1 147.87 29.341 A 2.365 2.365 0 0 1 146.938 29.588 C 145.495 29.653 143.992 28.265 142.683 25.1 A 21.268 21.268 0 0 1 142.56 24.796 C 141.779 22.871 141.569 21.171 141.939 19.953 A 2.571 2.571 0 0 1 143.28 18.316 A 4.424 4.424 0 0 1 144.26 17.978 C 145.274 17.744 146.58 17.713 147.986 17.834 A 22.952 22.952 0 0 1 149.085 17.956 Z M 110.327 12.283 A 6.228 6.228 0 0 0 109.845 11.341 C 107.955 8.281 105.255 7.471 103.545 8.551 A 2.454 2.454 0 0 0 102.565 9.738 C 101.982 11.225 102.615 13.53 104.045 16.394 A 44.538 44.538 0 0 0 105.435 18.946 A 8.263 8.263 0 0 0 108.577 17.624 C 110.303 16.391 111.221 14.494 110.327 12.283 Z" /> <path d="M290.1 137.5s2.5 12.9-.5 22.4a1.7 1.7 0 0 0 .6 1.9 14 14 0 0 0 16.7 0v-.1a1.6 1.6 0 0 0 .7-1.7 47.4 47.4 0 0 1 0-22.5l-10.3-5.8z" class="face" /> <path d="M290.7 138.5a21 21 0 0 0 19.3-1c20.3-13 23-36.6 21.7-48.8-1.7-15.3-5.9-18-11.7-25.2s-14.1-12.3-23-12.9a12.2 12.2 0 0 0-7.9 1.7c-1 .7-1.7 2-2.8 2.7-26.7 14-31.5 65 4.4 83.5z" class="face" /> <path d="M333.1 93.8a100.2 100.2 0 0 1-.5 9.7c-4.5-5.9-1.5-11.7-4.9-25.3a18.2 18.2 0 0 0-9.6-12.4c-4.6-2.6-9.9-4-14-7.1a21 21 0 0 1-2.3-2 13.2 13.2 0 0 1-3.2-5 9.2 9.2 0 0 1-.5-2.3h4.3a23.6 23.6 0 0 1 14.8 5.5 35 35 0 0 1 6.9 7.5l.5.7c5.2 8 8.5 18.8 8.5 30.7z" class="hair" /> <path d="M299.5 48.8a8.3 8.3 0 0 1-.5 2.3 12.7 12.7 0 0 1-2.7 4.3 22 22 0 0 1-2.9 2.5 36.7 36.7 0 0 1-7.8 4.1c-6.6 2.8-13.5 5.4-15.9 15-3.3 13.3-.3 19-4.9 24.7l-.2-2q-.3-3.6-.3-7.3a53.5 53.5 0 0 1 10.5-32.7 31.3 31.3 0 0 1 9-7.7 23.3 23.3 0 0 1 11.5-3.1z" class="hair" /> <g class="heart"> <path d="M402.5 131s-13.6-20-2.6-23.1c6-1.7 8.9 7.9 8.9 7.9s8.1-5.5 11.8-.1c6.5 9.5-18 15.3-18 15.3z" /> <path d="M401.6 95.7s-9.6-8.9-4.2-11.8c3-1.6 5.7 3 5.7 3s3.6-3.8 6.2-1.4c4.5 4.2-7.7 10.2-7.7 10.2z" /> <path d="M426.3 106.1s-3.4-6.2 0-6.8c1.7-.3 2.3 2.6 2.3 2.6s2.5-1.4 3.4.3c1.6 3-5.7 4-5.7 4z" /> <path d="M196 131s13.7-20 2.7-23.1c-6-1.7-9 7.9-9 7.9s-8-5.5-11.8-.1C171.4 125.2 196 131 196 131z" /> <path d="M197 95.7s9.5-8.9 4.1-11.8c-3-1.6-5.6 3-5.6 3s-3.6-3.8-6.2-1.4c-4.6 4.2 7.6 10.2 7.6 10.2z" /> <path d="M172.2 106.1s3.4-6.2.1-6.8c-1.8-.3-2.4 2.6-2.4 2.6s-2.5-1.4-3.4.3c-1.6 3 5.7 4 5.7 4z" /> </g> <path d="M262 53.2a.3.3 0 0 1-.2 0 .4.4 0 0 1 0-.6 54.3 54.3 0 0 1 10.4-7.6c6-3.4 15.4-7.4 26.6-7a55.7 55.7 0 0 1 25.9 7.2 43.2 43.2 0 0 1 9 6.7.4.4 0 0 1 0 .6.4.4 0 0 1-.5 0 43 43 0 0 0-9-6.7 55 55 0 0 0-25.5-7.1c-11-.4-20.2 3.5-26.1 7a54 54 0 0 0-10.3 7.4.4.4 0 0 1-.2.1z" class="leaf-3" /> <path d="M300.3 38.2c.1-1.8-.1-5.3-3.6-6.6a2 2 0 0 0-2.7 2c0 1.8.9 4.2 4.3 5.4-1.8-.2-4.7.1-6.2 3a2 2 0 0 0 1.8 3 5.6 5.6 0 0 0 5.5-3.6 5.6 5.6 0 0 0 3 5.7 2 2 0 0 0 3-1.8 5.7 5.7 0 0 0-3.9-5.7c4 .3 5.6-1.7 6.4-3.5a2 2 0 0 0-1.8-2.7c-3.7 0-5.2 3-5.8 4.8z" class="flower-1" transform-origin="300 38" transform="scale(1.5)" /> <path d="M300.8 38.2c1-1.5 2.7-4.5.4-7.5a2 2 0 0 0-3.3.2c-.9 1.6-1.5 4.1.8 7-1.5-1.2-4-2.5-6.9-.8a2 2 0 0 0 0 3.4 5.7 5.7 0 0 0 6.6 0 5.6 5.6 0 0 0-.5 6.4 2 2 0 0 0 3.4.2 5.6 5.6 0 0 0-.3-7c3.2 2.4 5.7 1.5 7.3.4a2 2 0 0 0 0-3.3c-3.2-2-6-.2-7.5 1z" class="flower-2" transform-origin="300 38" transform="scale(1.5)" /> <path d="M335.4 48.8c1-1.5 2.7-4.5.4-7.5a2 2 0 0 0-3.3.2c-1 1.6-1.5 4.1.8 7-1.5-1.2-4-2.5-6.9-.8a2 2 0 0 0 0 3.4 5.6 5.6 0 0 0 6.5 0 5.6 5.6 0 0 0-.4 6.4 2 2 0 0 0 3.4.1 5.6 5.6 0 0 0-.3-6.9c3.2 2.3 5.7 1.5 7.3.4a2 2 0 0 0 0-3.3c-3.2-2-6.1-.2-7.5 1z" class="flower-1" transform-origin="335 48" transform="scale(1.35)" /> <path d="M334.8 48.5c0-1.9-.6-5.3-4.2-6.3a2 2 0 0 0-2.5 2.2c.2 1.8 1.2 4.2 4.8 5-1.9 0-4.7.6-6 3.7a2 2 0 0 0 2 2.7 5.6 5.6 0 0 0 5.3-4 5.6 5.6 0 0 0 3.5 5.4 2 2 0 0 0 2.8-2 5.7 5.7 0 0 0-4.4-5.3c4-.1 5.4-2.3 6-4.1a2 2 0 0 0-2-2.6c-3.7.3-5 3.5-5.3 5.3z" class="flower-2" transform-origin="335 48" transform="scale(1.35)" /> <path d="M265.8 48.8c1.1-1.5 2.7-4.5.5-7.5a2 2 0 0 0-3.3.2c-1 1.6-1.6 4.1.7 7-1.5-1.2-4-2.5-6.9-.8a2 2 0 0 0 0 3.4 5.6 5.6 0 0 0 6.6 0 5.6 5.6 0 0 0-.5 6.4 2 2 0 0 0 3.5.1 5.6 5.6 0 0 0-.4-6.9c3.2 2.3 5.7 1.5 7.3.4a2 2 0 0 0 0-3.3c-3.2-2-6-.2-7.5 1z" class="flower-1" transform-origin="265 48" transform="scale(1.35)" /> <path d="M266 49.6c2-.4 5.2-1.5 5.6-5.2a2 2 0 0 0-2.6-2.1c-1.8.5-3.9 2-4.2 5.6-.3-1.9-1.3-4.6-4.5-5.3A2 2 0 0 0 258 45a5.6 5.6 0 0 0 4.9 4.5 5.6 5.6 0 0 0-4.8 4.4 2 2 0 0 0 2.4 2.4 5.7 5.7 0 0 0 4.6-5.2c.7 3.8 3.1 5 5 5.3a2 2 0 0 0 2.3-2.5c-1-3.6-4.4-4.3-6.2-4.3z" class="flower-2" transform-origin="265 48" transform="scale(1.35)" /> <g> <path d="M340 69.1s2-12.3 15.6-7.8c0 0-3.6 13.1-15.6 7.8z" class="leaf-2" /> <path d="M340 69.1s2-12.3 15.6-7.8c0 0-4 2.4-7.5 4.1a70.2 70.2 0 0 1-8.1 3.7z" class="leaf-1" /> </g> <g> <path d="M340.2 71.9s6.4-3.5 9.1 4.3c0 0-7.3 3-9-4.3z" class="leaf-4" /> <path d="M340.2 71.9s6.4-3.5 9.1 4.3c0 0-2.5-1-4.5-2a41.4 41.4 0 0 1-4.6-2.3z" class="leaf-3" /> </g> <g> <path d="M259.8 69.1s-2-12.3-15.6-7.8c0 0 3.6 13.1 15.6 7.8z" class="leaf-2" /> <path d="M259.8 69.1s-2-12.3-15.6-7.8c0 0 4 2.4 7.5 4.1a70.3 70.3 0 0 0 8.1 3.7z" class="leaf-1" /> </g> <g> <path d="M259.6 71.9s-6.3-3.5-9 4.3c0 0 7.2 3 9-4.3z" class="leaf-4" /> <path d="M259.6 71.9s-6.3-3.5-9 4.3l4.5-2a39.6 39.6 0 0 0 4.5-2.3z" class="leaf-3" /> </g> </svg> </div> {% schema %} { "name": "My Land Animation", "settings": [], "presets": [ { "name": "My Land Animation" } ] } {% endschema %} 这是我的CSS： @keyframes hair-flow { from { d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306"); } to { d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306"); } } @-webkit-keyframes hair-flow { from { d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306"); } to { d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306"); } } @-o-keyframes hair-flow { from { d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306"); } to { d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306"); } } @-moz-keyframes hair-flow { from { d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306"); } to { d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306"); } } .hair-main { animation:hair-flow 0.75s infinite alternate ease-in-out; -webkit-animation:hair-flow 0.75s infinite alternate ease-in-out; -o-animation:hair-flow 0.75s infinite alternate ease-in-out; -moz-animation:hair-flow 0.75s infinite alternate ease-in-out; } 大家好 我目前面临 CSS 动画在 iOS 设备上无法按预期工作的问题。尽管使用关键帧实现标准 CSS 动画，但动画在 iPhone 和 iPad 上无法触发或无法流畅播放。 以下是有关我的设置的一些详细信息： 动画类型：我正在使用 CSS 关键帧来为 svg 头发设置动画。 测试的浏览器：我在 iOS 上的 Safari 上进行了测试。 使用的CSS属性：在代码中解释。 预期行为：动画应该在 IOS 设备（例如网络和 Android 设备）上播放。 当前行为：在 iOS 上，动画无法触发，头发没有上下波动。 我怀疑这可能与 iOS 对动画或特定 CSS 属性的处理有关。有其他人遇到过这个问题吗？您对故障排除或解决方案有什么建议吗？任何帮助将不胜感激！ 我尝试使用 -webkit- 但仍然不起作用......顺便说一句，我只关注“头发”的动画 谢谢！ 迄今为止（2024 年）webkit 无法通过 d 更改 presentation 属性 path()。 作为解决方法，您可以使用 SMIL 动画来代替 @keyframes hair-flow { from { d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306"); } to { d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306"); } } .hair-main2 { fill: red; animation: hair-flow 0.75s infinite alternate ease-in-out; } <h3>SVG SMIL animation</h3> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> <defs> <g id="path-1"> <path d="" class="hair hair-main"> <animate attributeName="d" attributeType="XML" values="M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306; M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306; M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306" dur="1.5s" repeatCount="indefinite" keyTimes="0; 0.5; 1" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" calcMode="spline" fill="freeze" /> </path> </g> </defs> <use href="#path-1" x="0" y="0" /> <use href="#path-1" x="0" y="0" transform="translate(300, 0) scale(-1, 1) translate(-300, 0)" /> </svg> <h3>CSS animation (not working in webkit)</h3> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> <defs> <path id="path" d="" class="hair hair-main2" /> </defs> <use href="#path" x="0" y="0" /> <use href="#path" x="0" y="0" transform="translate(300, 0) scale(-1, 1) translate(-300, 0)" /> </svg> 您可以在 <animate> 内嵌套 <path> 元素（或通过 href 属性引用它。 values：包含逗号分隔的d（路径数据）值数组。我们需要复制第一个值，因为 SMIL 没有像 CSS alternate 那样在每次迭代中来回播放动画的本机方法 repeatCount="indefinite"使动画无限循环 keyTimes="0; 0.5; 1"指定不同动画“关键帧”的时间 keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" calcMode="spline" 模拟 ease-in-out 缓动行为 另请参阅 SVG 动画指南 (SMIL)

如何仅在变换上应用转换：translateX()？

身体{ 高度：100vh； 显示：柔性； 调整内容：居中； 对齐项目：居中； } div { 高度：50px； 宽度：200px； 背景：rgb(255,99,99)； } div：悬停{ 变换：翻译X(

div 动画时 z-index 不起作用

即使在 ::after 上应用 z-index -1 之后，::after 的堆叠上下文也不是我想要的方式，我已经观察和研究了很多，但仍然无法解决这个问题有

多个元素上的 CSS 动画：悬停后重新同步

我正在制作一个游戏，你可以点击一个方块来显示一个字母。这些块具有“发光”效果，它们通过淡入白色并返回到原始颜色来改变颜色...

如何创建与此类似的卷轴？

我正在尝试创建一个类似的卷轴。 现在我已经在reactjs中创建了一个结构，但是当右侧粘性时我无法在不使用任何库的情况下计算左侧滚动。 .

通过滑动方式切换显示/隐藏Div的动画

我只想在其父行内播放第二个 div 动画。现在第二个 div 正在移出行边界。我该如何处理这个问题？这是我第一次尝试动画。