t;div ng-messages=&quot;myMessages&quot; class=&quot;my-messages&quot; role=&quot;alert&quot;&gt;
  &lt;div ng-message=&quot;alert&quot; class=&quot;some-message&quot;&gt;...&lt;/div&gt;
  &lt;div ng-message=&quot;fail&quot; class=&quot;some-message&quot;&gt;...&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>Then the CSS animation code for the message container looks like so:</p>
<pre><code class="lang-css">.my-messages {
  transition:1s linear all;
}
.my-messages.ng-active {
  // messages are visible
}
.my-mess