得到了一個帶有關鍵幀的簡單動畫。

@-webkit-keyframes rotation {
    0%   { -webkit-transform: rotate(10deg); }
    25%  { -webkit-transform: rotate(5deg); }
    50%  { -webkit-transform: rotate(10deg); }
    75%   { -webkit-transform: rotate(5deg); }
    100% { -webkit-transform: rotate(10deg); }

}

和

.class { -webkit-animation: rotation 1s infinite; }

可以在這個關鍵幀動畫之間添加暫停嗎？大概5秒鐘？ 我知道有一個-webkit-animation-delay，但這只是延遲了動畫的開始。

附注:我知道這只是webkit前綴...最后我通過prefixr得到了它。

在我自己和Denny Mueller的幫助下，我發現關鍵是在100%之前停止。

您可以使用延遲以延遲開始，在第一次迭代后，延遲將是動畫完成后剩余的時間量。

以下是我在實現中使用的內容:

@-webkit-keyframes spincube {
    from,to      {                                                    }
    8%,14%       { -webkit-transform: rotateY(-90deg);                }
    24%,30%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
    40%,46%      { -webkit-transform: rotateY(180deg) rotateZ(90deg); }
    56%,62%      { -webkit-transform: rotateY(90deg) rotateX(90deg);  }
    72%,78%      { -webkit-transform: rotateX(90deg);                 }
    88%,94%      { -webkit-transform: rotateX(0deg);                  }
}

如你所見，我在94%處停止，剩下的6%用于在第一幀暫停。

找到了一個解決方法，但是看起來有點臟

@-webkit-keyframes rotation {
        0%   { -webkit-transform: rotate(10deg); }
        5%  { -webkit-transform: rotate(5deg); }
        10%  { -webkit-transform: rotate(10deg); }
        15%   { -webkit-transform: rotate(5deg); }
        20% { -webkit-transform: rotate(10deg); }
        100% { -webkit-transform: rotate(10deg); }

    }
.class { -webkit-animation: rotation 5s infinite; }

其他的答案很有用。但是對于那些使用Mui makeStyles的人來說:

import React from 'react';
import { useStyles } from './useStyles';

export const BouncingDots = () => {
  const styles = useStyles();

  return (
    <div className={styles.root}>
      <div className={styles.dot} />
      <div className={styles.dot} />
      <div className={styles.dot} />
    </div>
  );
};

import { makeStyles } from '@material-ui/core/styles';
import { COLORS } from 'src/data/ui';

export const useStyles = makeStyles(
  () => ({
    root: {
      display: 'flex',
      justifyContent: 'center',
      gap: 3,
    },

    dot: {
      width: 5,
      height: 5,
      borderRadius: '50%',
      backgroundColor: COLORS.primary.default,
      animation: '$bounce 1s infinite alternate',

      '&:nth-child(2)': {
        animationDelay: '0.2s',
      },
      '&:nth-child(3)': {
        animationDelay: '0.3s',
      },
    },

    '@keyframes bounce': {
      '0%': {
        opacity: 1,
        transform: 'translateY(0px)',
      },

      //this is a hack to make the dots pause for half of the time
      '50%': {
        opacity: 0.5,
        transform: 'translateY(-4px)',
      },

      '100%': {
        opacity: 0.5,
        transform: 'translateY(-4px)',
      },
    },
  }),
  { name: 'Suggestions' }
);