Snipt.net is closing on December 31st, 2016

For more information, please visit this blog post.

snipt

Ctrl+h for KB shortcuts

CSS

IMAGE CAPTION HOVER ANIMATION WITH CSS3 TRANSITIONS & TRANSFORMS

http://hasinhayder.github.io/ImageCaptionHoverAnimation/index4.html
https://snipt.net/embed/d7902b7a25477cd4322eb030a1875c50/
https://snipt.net/raw/d7902b7a25477cd4322eb030a1875c50/
d7902b7a25477cd4322eb030a1875c50
css
CSS
1
2016-12-05T05:57:25
True
False
False
Dec 02, 2013 at 10:06 AM
/api/public/snipt/97959/
image-caption-hover-animation-with-css3-transitions-transforms
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">http</span><span class="o">://</span><span class="nt">hasinhayder</span><span class="nc">.github.io</span><span class="o">/</span><span class="nt">ImageCaptionHoverAnimation</span><span class="o">/</span><span class="nt">index4</span><span class="nc">.html</span> </span></pre></div> </td></tr></table>
"image caption", "image hover", caption, css3

CSS

Transition css3 all modern browser

1
2
3
4
-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s;
https://snipt.net/embed/f1587b17e9baa3eb43ba4fb68f2e0842/
https://snipt.net/raw/f1587b17e9baa3eb43ba4fb68f2e0842/
f1587b17e9baa3eb43ba4fb68f2e0842
css
CSS
4
2016-12-02T08:01:16
True
False
False
Nov 25, 2013 at 09:39 AM
/api/public/snipt/96624/
transition-css3-all-modern-browser
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">-webkit-transition</span><span class="o">:</span> <span class="nt">background-color</span> <span class="nt">500ms</span> <span class="nt">ease-out</span> <span class="nt">1s</span><span class="o">;</span> </span><span id="L-2"><a name="L-2"></a><span class="nt">-moz-transition</span><span class="o">:</span> <span class="nt">background-color</span> <span class="nt">500ms</span> <span class="nt">ease-out</span> <span class="nt">1s</span><span class="o">;</span> </span><span id="L-3"><a name="L-3"></a><span class="nt">-o-transition</span><span class="o">:</span> <span class="nt">background-color</span> <span class="nt">500ms</span> <span class="nt">ease-out</span> <span class="nt">1s</span><span class="o">;</span> </span><span id="L-4"><a name="L-4"></a><span class="nt">transition</span><span class="o">:</span> <span class="nt">background-color</span> <span class="nt">500ms</span> <span class="nt">ease-out</span> <span class="nt">1s</span><span class="o">;</span> </span></pre></div> </td></tr></table>
"modern browsers", css3, transition

JavaScript

jQuery - detect CSS3 transition end

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
https://snipt.net/embed/f16de02cf9517154e4b8bf7a7edaa238/
https://snipt.net/raw/f16de02cf9517154e4b8bf7a7edaa238/
f16de02cf9517154e4b8bf7a7edaa238
js
JavaScript
1
2016-12-05T06:01:38
True
False
False
Nov 24, 2013 at 10:40 AM
/api/public/snipt/96298/
jquery-detect-css3-transition-end
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#someSelector&quot;</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> <span class="p">...</span> <span class="p">});</span> </span></pre></div> </td></tr></table>
css3, jquery
Copyrighted, illegal, or inappropriate content? Email [email protected].