Tag Archives: animation examples

Simple CSS Button Hover Effect

By | December 25, 2018

Simple CSS Button Hover Effect. Simple, but good looking :hover and :active transition for buttons and links styled as buttons. Tutorial/codes – Demo Author: Andréas Lundgren Created: JUNE 01, 2016 Made with: HTML, CSS and JavaScript

7 different style CSS button transitions

By | December 25, 2018

CSS Button Animations styles.Playing around with some CSS button transitions. Possible repo for future use. Learning experience for me dealing with browser compatibility. Tutorial/codes – Demo Author: Alex Loomer Created: FEBRUARY 07, 2017 Made with: HTML, CSS

Really clever CSS napkin animation waves effects

By | October 24, 2018

Really clever napkin animation waves effects with element Scalling using only CSS and HTML. Demo and download available. Demo Download Author Indrek Paas Created SEPTEMBER 20, 2018 License Open Compatible browsers Chrome, Firefox, Safari HTML Snippet <div> <div class=”row”> <div class=”column”></div> <div class=”column”></div> <div class=”column”></div> <div class=”column”></div> <div class=”column”></div> <div class=”column”></div> <div class=”column”></div> <div class=”column”></div> <div class=”column”></div> <div… Read More »

Angled Youtube Embed with animation effect when hover

By | October 10, 2018

Angled Youtube Embed with animation effect when hover developed using css, html and javascript. Demo and download available. Demo Download Author Russ Pate Created JULY 10, 2018 License Open Compatible browsers Chrome, Firefox, Safari HTML Snippet <div class=”vh-100 flex justify-center items-center vh-100″> <div id=”vidWrapper” class=”vid isAngled”> <div id=”ytplayer” class=”vid-wrap”></div> </div> </div> CSS Code .vid { transition: .5s all;… Read More »

Image Slider with clip-path animation

By | October 7, 2018

Cool slider animation with clip-path. Image slide show animation developed using CSS, HTML and JavaScript. Demo and Download options are available. Demo Download Author Uwe Chardon Created SEPTEMBER 16, 2018 License Open Compatible browsers Chrome, Firefox, Safari HTML Snippet <div class=”slider” data-state=”0″> <svg id=”prev” viewBox=’0 0 100 100′> <circle cx=”50″ cy=”50″ r=”85″ /> <path d=”M 65,2 17,50 65,98″… Read More »

Simple square shape animated Dot Loader

By | October 1, 2018

Simple animated loader develped using HTML, CSS and JavaScript. Demo and Download options available. Demo Download Author Kyle Brumm Created MARCH 26, 2017 License Open Compatible browsers Chrome, Firefox, Safari HTML Snippet <main class=”main container”> <div class=”col col–full”> <div class=”dot-loader”> <div class=”dot”></div> <div class=”dot”></div> <div class=”dot”></div> <div class=”dot”></div> <div class=”dot”></div> <div class=”dot”></div> <div class=”dot”></div> <div class=”dot”></div> <div class=”dot”></div>… Read More »

CSS Transform Origin illustration Example

By | September 23, 2018

This demo will show all sides origin rotation of element using css Transform Origin illustration. Demo and download options available. Demo Download Author Shaw Created SEPTEMBER 12, 2018 License Open Compatible browsers Chrome, Firefox, Safari This demo use all the direction of origin rotation using CSS transform-origin illustration. Find the code snippet below. HTML Snippet <div class=”origin” style=”transform-origin:… Read More »

Moving Snakes Using HTML5 Canvas

By | September 15, 2018

Experiment with HTML5 Canvas Particles to create a beautiful Moving Snakes effects with Particle Trails. Demo Download Author Nitish Khagwal Official Page: Go to website Created AUGUST 23, 2018 License Open Compatible browsers Chrome, Firefox, Opera, Safari HTML Snippet <h1><span>W3</span> <span>Tweaks</span></h1> CSS Code ::selection { background-color: #ffffff; color: #000000; } body { margin: 0; font-family: “Righteous”, sans-serif; background-color:… Read More »

Develop beautiful cloudy spiral using CSS animation effects

By | September 14, 2018

CSS animation effects to bring with beautifull cloudy spiral effects. code, download and demo available.Code using <i></i> html element and css properties. Demo Download Author Hakim El Hattab Official Page: Go to website Created JULY 03, 2013 License Open Compatible browsers Chrome, Firefox, Opera, Safari HTML <div class=’wrapper’> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>… Read More »

33 CSS transition tricks and effects examples

By | October 28, 2017

33 Hand picked CSS transition tricks and effects. Developed using HTML, CSS, javascript, jQuery and SVG. Demo and Download the zip (*.zip) Animate “height” with CSS Transitions Demo Image: Animate “height” with CSS Transitions Animating max-height for replace height:auto limitation in the CSS Transition. Developed By: Felipe Fialho Created: NOVEMBER 18, 2013 Demo Download Menu Toggle button with… Read More »