Css 脉冲动画不起作用

我不明白为什么我的代码不起作用，希望有人能帮助我。

这是我的代码:

@-webkit-keyframes pulse
{
  0%
  {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50%
  {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100%
  {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse
{
  0%
  {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50%
  {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100%
  {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse 
{
  -webkit-animation-name: pulse;
  animation-name: pulse;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

<html>
  <head></head>
  <body>
    <h1 class="pulse">Thermostat-Einstellungen</h1>        
    <h2>Eingestellte Temperatur</h2>
    <form action="web_event" id="eingestellte_temperatur_form" method="POST">
      <input name="web_event[event_type]" type="hidden" value="desired_temp_change">
      <input name="web_event[integer_value]" type="text" data-displayPrevious=true value="20" class="dial">
    </form>
    <hr/>
    <h2>Aktuelle Temperatur</h2>
    <form id="aktuelle_temp_form">
      <input name="web_event[integer_value]" type="text" value=20 data-fgColor="#ffec03" data-skin="tron" class="dial">
    </form>
    <hr/>
    <h2>Letzte Termperaturen</h2>
    <div id="echtzeit_graph" class="wild_graph"></div>
  </body>

</html>

在我的上一个元素中，这个动画效果很好，但在我的 ruby on rails 元素中，我无法使动画正常工作

最佳答案

你缺少动画持续时间

@-webkit-keyframes pulse
{
    0%
     {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50%
    {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }
    100%
    {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse
{
    0%
     {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50%
    {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }
    100%
    {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.pulse 
{
    -webkit-animation-name: pulse;
    animation-name: pulse;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-duration: 1s;
}

<html>

    <head></head>

    <body>
      <h1 class="pulse">Thermostat-Einstellungen</h1>
        <h2>Eingestellte Temperatur</h2>
        <form action="web_event" id="eingestellte_temperatur_form" method="POST">
            <input name="web_event[event_type]" type="hidden" value="desired_temp_change">
            <input name="web_event[integer_value]" type="text" data-displayPrevious=true value="20" class="dial">
        </form>
        <hr/>
        <h2>Aktuelle Temperatur</h2>
        <form id="aktuelle_temp_form">
            <input name="web_event[integer_value]" type="text" value=20 data-fgColor="#ffec03" data-skin="tron" class="dial">
        </form>
        <hr/>
        <h2>Letzte Termperaturen</h2>
        <div id="echtzeit_graph" class="wild_graph"></div>
    </body>

</html>

关于Css 脉冲动画不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40434481/

Css 脉冲动画不起作用

上一篇：html - 将鼠标悬停在输入上，除法会受到影响

下一篇：html - 使2个链接同时出现选中