Question

我无法弄清楚为什么我的代码不起作用，希望有人可以帮助我。

这是我的代码：

@-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项目中我无法使动画工作

Answer 1

您缺少动画持续时间

＆＃13;

@-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;
}

＆＃13;

<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>

＆＃13;

Css脉冲动画不起作用

1 个答案: