reactjs 为什么这个标志永远不会旋转？[复制]

kxeu7u2r 于 2023-04-20 发布在 React

关注(0)|答案(3)|浏览(93)

此问题已在此处有答案：

How to have css3 animation to loop forever（3个答案）
17小时前关闭
多伦多证交所：

function Content() {
  return (
    <>
    <main id="main">
        <img src="/vite.svg" id="logo" />
    </main>
    </>
  );
}

export default Content;

CSS：

:root {
  font-family:  sans-serif, Arial !important;
}

#main #logo {
  animation-name: spin;
}

@keyframes spin {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360);
  }
}

我什么都没试过，期待着React标志旋转动画，但在vite图像。

reactjs

来源：https://stackoverflow.com/questions/76050415/why-is-the-logo-not-spinning-forever

3条答案

按热度按时间

a8jjtwal1#

您需要像下面的代码片段那样为它提供计数：

#logo {
  animation: spin 1000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

赞(0）回复(0）举报 2023-04-20

wqsoz72f2#

你需要指定多长时间你想使徽标动画。

animation: spin 2s linear infinite;

在这里，spin是你的动画名称，2s是一次旋转完成的时间间隔，linear是计时函数，infinite是迭代次数。在你的“to{}块”后面添加这一行。

赞(0）回复(0）举报 2023-04-20

oiopk7p53#

CSS animations需要动画名称之外的其他信息。一个正常运行的CSS动画看起来像这样：

p {
  animation-duration: 3s;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

但这通常是用速记写的：

#main #logo {
  animation: 3s infinite linear spin;
}

@keyframes spin { 
  100% { 
    transform: rotateY(360deg); 
  } 
}

<div id="main">
  <img id="logo" src="http://placekitten.com/g/200/300"/>
</div>

赞(0）回复(0）举报 2023-04-20

我来回答

reactjs 为什么这个标志永远不会旋转？[复制]

3条答案

相关问题

热门标签

最新问答