每个 <g> 的 CSS 动画“原点”

Posted 2023-03-06

【中文标题】每个 <g> 的 CSS 动画“原点”

【英文标题】：CSS animation 'origin' for each <g>

【发布时间】：2019-07-04 21:01:48

【问题描述】：

使用 CSS 动画，我为单词中的每个字母添加了“摆动”效果。每个字母由一个 SVG 组 <g> 组成。但是，正如您在示例中看到的那样，每个字母的效果变得更加极端，而我希望每个字母都有一致的“摆动”（每个字母的效果相同）。如何做到这一点？

注意：我没有包含 SVG 源代码，以保持问题整洁。如有需要，可以在示例中看到。

谢谢。

SCSS

// Logo
.logo 
    position: fixed;
    top: 50%;
    left: 50%;
  transform: translate(-50%,-50%);
    z-index: 1;
    width: 260px;
    display: block;

    // SVG
    svg 
        display: block;
        width: 100%;
        overflow: visible;

        g 
            fill: transparent;
            transition: all 300ms ease-in-out;

            @keyframes wobble 
              0%  transform: rotate(0) translate3d(0, 0, 0) 
              25%  transform: rotate(2deg) translate3d(1px, 0, 0) 
              50%  transform: rotate(-1deg) translate3d(0, -1px, 0) 
              75%  transform: rotate(1deg) translate3d(-1px, 0, 0) 
              100%  transform: rotate(-2deg) translate3d(-1px, -1px, 0) 
            

            animation-duration: 400ms;
            animation-iteration-count: infinite;
            animation-fill-mode: none;
            animation-name: wobble;
            animation-timing-function: ease-in-out;

            path 
                fill: red;
            
        
  

Example

【问题讨论】：

你必须为每个字母使用 SVG 吗？

如果您将transform-origin: center; 添加到g，您会看到“摆动”居中。我猜是你的 SVG 动画，而不是每个 g

【参考方案1】：

我不知道如何使用 SVG 来做到这一点 - 我确实设法想出了与您的要求相似的东西。

部分解决方案涉及使用旋转中心点：

transform-origin: center;

请看下面的演示

#my-logo div 
  display: inline-block;
  color: red;
  font-size: 60px;
  font-family: arial;
  font-weight: bolder;
  text-transform: uppercase;
  fill: transparent;
  transition: all 300ms ease-in-out;
  transform-origin: center;
  animation-duration: 400ms;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-name: wobble;
  animation-timing-function: ease-in-out;


@keyframes wobble 
  0% 
    transform: rotate(0) translate3d(0, 0, 0);
  
  25% 
    transform: rotate(2deg) translate3d(1px, 0, 0);
  
  50% 
    transform: rotate(-1deg) translate3d(0, -1px, 0);
  
  75% 
    transform: rotate(1deg) translate3d(-1px, 0, 0);
  
  100% 
    transform: rotate(-2deg) translate3d(-1px, -1px, 0);
  

<div id="my-logo">
  <div>o</div>
  <div>u</div>
  <div>t</div>
  <div>r</div>
  <div>a</div>
  <div>g</div>
  <div>e</div>
  <div>
    <!-- also works with images -->
    <img src="http://placekitten.com/100/100" />
  </div>
</div>

【讨论】：

感谢@ochi - 感谢您的回答，这是一个很好的解决方案。但是，由于我需要它用于 SVG，所以 iot 并没有完全回答这个问题，所以我没有标记为正确。再次感谢