<p dir="auto">Hello,</p>
<p dir="auto">I couldn't find earlier posted questions about this, but if there are, excuse me for posting a duplicate.<br>
I wanted to animate my progress bar (from left to right), but when inspecting the existing rules, I saw there is already a built-in transition for progress bars:</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".progress-bar {
     /*Other CSS Rules */
     -webkit-transition: width .6s ease;
     transition: width .6s ease;
}"><pre class="notranslate">.<span class="pl-c1">progress-bar</span> {
     <span class="pl-c">/*Other CSS Rules */</span>
     <span class="pl-c1">-webkit-transition</span><span class="pl-kos">:</span> width <span class="pl-c1">.6<span class="pl-smi">s</span></span> ease;
     <span class="pl-c1">transition</span><span class="pl-kos">:</span> width <span class="pl-c1">.6<span class="pl-smi">s</span></span> ease;
}</pre></div>
<p dir="auto">However, I hadn't noticed the transition at all, so I added</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".progress-bar {
     -webkit-transition: width 4s ease;
     transition: width 4s ease;
}"><pre class="notranslate">.<span class="pl-c1">progress-bar</span> {
     <span class="pl-c1">-webkit-transition</span><span class="pl-kos">:</span> width <span class="pl-c1">4<span class="pl-smi">s</span></span> ease;
     <span class="pl-c1">transition</span><span class="pl-kos">:</span> width <span class="pl-c1">4<span class="pl-smi">s</span></span> ease;
}</pre></div>
<p dir="auto">to my (adjustments) stylesheet to be sure to notice the animation.<br>
However, it still didn't animate on page load (and I used Google Chrome Developer Tools to verify this new rule overrode the old one).</p>
<p dir="auto">Why doesn't this work? <em>(Neither the <code class="notranslate">.6s</code> and the <code class="notranslate">4s</code>)</em></p>
<p dir="auto">The CSS Rule for progress bars is actually</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".progress-bar {
     float: left;
     width: 0;
     height: 100%;
     font-size: 12px;
     line-height: 20px;
     color: #fff;
     text-align: center;
     background-color: #428bca;
     -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
     box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
     -webkit-transition: width .6s ease;
     transition: width .6s ease;
}"><pre class="notranslate">.<span class="pl-c1">progress-bar</span> {
     <span class="pl-c1">float</span><span class="pl-kos">:</span> left;
     <span class="pl-c1">width</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>;
     <span class="pl-c1">height</span><span class="pl-kos">:</span> <span class="pl-c1">100<span class="pl-smi">%</span></span>;
     <span class="pl-c1">font-size</span><span class="pl-kos">:</span> <span class="pl-c1">12<span class="pl-smi">px</span></span>;
     <span class="pl-c1">line-height</span><span class="pl-kos">:</span> <span class="pl-c1">20<span class="pl-smi">px</span></span>;
     <span class="pl-c1">color</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>fff</span>;
     <span class="pl-c1">text-align</span><span class="pl-kos">:</span> center;
     <span class="pl-c1">background-color</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>428bca</span>;
     <span class="pl-c1">-webkit-box-shadow</span><span class="pl-kos">:</span> inset <span class="pl-c1">0</span> <span class="pl-c1">-1<span class="pl-smi">px</span></span> <span class="pl-c1">0</span> <span class="pl-en">rgba</span>(<span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0.15</span>);
     <span class="pl-c1">box-shadow</span><span class="pl-kos">:</span> inset <span class="pl-c1">0</span> <span class="pl-c1">-1<span class="pl-smi">px</span></span> <span class="pl-c1">0</span> <span class="pl-en">rgba</span>(<span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0.15</span>);
     <span class="pl-c1">-webkit-transition</span><span class="pl-kos">:</span> width <span class="pl-c1">.6<span class="pl-smi">s</span></span> ease;
     <span class="pl-c1">transition</span><span class="pl-kos">:</span> width <span class="pl-c1">.6<span class="pl-smi">s</span></span> ease;
}</pre></div>
<p dir="auto">so as you can see, first <code class="notranslate">width:0;</code> is set, and later I set, like the <a href="http://getbootstrap.com/components/#progress" rel="nofollow">Bootstrap Example</a>, an inline rule <code class="notranslate">style="width: 80%;"</code>...</p>
<p dir="auto">If I disable (and reenable) this <code class="notranslate">style="width: 80%;"</code> using the Google Chrome Developer Tools, it <em>does</em> animate, so my problem is <strong>it does not animate on page load</strong>...</p>
<p dir="auto"><strong>Am I missing something?</strong></p>
<p dir="auto"><em>My progress bar:</em></p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;progress-bar progress-bar-success&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;80&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 80%&quot;&gt;
    &lt;span class=&quot;sr-only&quot;&gt;80% Complete&lt;/span&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">progress-bar progress-bar-success</span>" <span class="pl-c1">role</span>="<span class="pl-s">progressbar</span>" <span class="pl-c1">aria-valuenow</span>="<span class="pl-s">80</span>" <span class="pl-c1">aria-valuemin</span>="<span class="pl-s">0</span>" <span class="pl-c1">aria-valuemax</span>="<span class="pl-s">100</span>" <span class="pl-c1">style</span>="<span class="pl-s">width: 80%</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">sr-only</span>"<span class="pl-kos">&gt;</span>80% Complete<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto"><em>I'm using an iMac with Google Chrome. I tested it on FireFox as well, same problem, so, uhm... It's most likely <code class="notranslate">I</code> am missing something</em><br>
<em>I use Bootstrap 3.0.2, but that's irrelevant, because you can see in my question it happens as well on the official Bootstrap Site.</em></p>
<p dir="auto">When using the content function for a popover, it seems to be executed twice when the trigger occurs.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="$(&quot;#blah&quot;).popover({
                    placement: 'bottom',
                    trigger: 'click',
                    content: function () {
                        console.log(&quot;Get content&quot;);
                        return &quot;Hi&quot;;
                    }
                });"><pre class="notranslate"><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">"#blah"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">popover</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
                    <span class="pl-c1">placement</span>: <span class="pl-s">'bottom'</span><span class="pl-kos">,</span>
                    <span class="pl-c1">trigger</span>: <span class="pl-s">'click'</span><span class="pl-kos">,</span>
                    <span class="pl-en">content</span>: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                        <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"Get content"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                        <span class="pl-k">return</span> <span class="pl-s">"Hi"</span><span class="pl-kos">;</span>
                    <span class="pl-kos">}</span>
                <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>