transition

JavaScript – add transition between display:none and display:block

by

@vothaison’s suggestion: CSS transitions Technically, @vothaison wanted to use setInterval as opposed to setTimeout, but I don’t see the need for that. It’s just more work. var hint = document.getElementById(‘hint’); var btn = document.getElementById(‘btn_show’); btn.addEventListener(‘click’, function(){ var ctr = 1; hint.className = hint.className !== ‘show’ ? ‘show’ : ‘hide’; if (hint.className === ‘show’) { hint.style.display … Read more

CSS3 Transition to highlight new elements created in JQuery

by

I was able to get this to work with css3 animation. Just apply the highlight class to new elements: $(‘#add-element’).click(function() { $(‘<div class=”highlight”>new element</div>’).appendTo(‘#content’); }); @keyframes yellow-fade { 0% { background: yellow; } 100% { background: none; } } .highlight { animation: yellow-fade 2s ease-in 1; } <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <button id=”add-element”>Add element</button> <div id=”content”></div> I … Read more

Looping Animation of text color change using CSS3

by

Use keyframes and animation property p { font-family: monospace; font-size: 3em; animation: color-change 1s infinite; } @keyframes color-change { 0% { color: red; } 50% { color: blue; } 100% { color: red; } } <p>lorem ipsum</p> CSS With Prefixes p { -webkit-animation: color-change 1s infinite; -moz-animation: color-change 1s infinite; -o-animation: color-change 1s infinite; -ms-animation: … Read more

Real time line graph with nvd3.js

by

You probably want to look at: D3 Real-Time streamgraph (Graph Data Visualization), especially the link of the answer: http://bost.ocks.org/mike/path/ In general, I see two ways to deal with the vertical transition problem: oversampling having some linear interpolation between the real point, and the smaller the interval between points, the more “horizontal” the vertical transition will … Read more

How do I make an expand/contract transition between views on iOS?

by

Making the effect is simple. You take the full-sized view, initialize its transform and center to position it on top of the thumbnail, add it to the appropriate superview, and then in an animation block reset the transform and center to position it in the final position. To dismiss the view, just do the opposite: … Read more