Css脉冲动画不起作用答案

【问题标题】：Css pulse Animation doesn't workCss脉冲动画不起作用
【发布时间】：2016-11-05 03:34:19
【问题描述】：

我不知道为什么我的代码不起作用，希望有人可以帮助我。

这是我的代码：

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

【问题讨论】：

标签： css ruby-on-rails ruby

【解决方案1】：

你缺少动画持续时间

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

【讨论】：