title: How to toggle CSS animation on PHP variable update?
body: <p>So I've got this here function in PHP:</p>
  
  <pre class="lang-php prettyprint-override"><code>$username = $password = $usernameError = $passwordError = "";
  if ($_SERVER["REQUEST_METHOD"] == "POST") {
      if (empty($_POST["username"])) {
          $usernameError = "Username invalid";
      } else {
        $username = check($_POST["username"]);
      }
  </code></pre>
  
  <p>I want to activate this CSS animation: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#error {
   color = red;
   animation:error 2s 1;
   -webkit-animation:error 2s 1;
   animation-fill-mode: forwards;
   animation-delay: 4s;
   -webkit-animation-delay: 4s;
   -webkit-animation-fill-mode: forwards;
  }
  @keyframes error{
   from {opacity :1;}
   to {opacity :0}
  }
  @-webkit-keyframes error{
   from {opacity :1;}
   to {opacity :0}
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>When the variable $usernameError is changed from nothing to something, in the above example it is changed to "Username invalid"</p>
  
  <p>For reference this is the html element the animation  is applied to:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span id="error"&gt;* &lt;?php echo $usernameError;?&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any suggestions for how to achieve this?</p>