falling stars css animation See the Pen Falling Stars by Prasenjit Nayak (@StarKnightt) on CodePen.
Cool looking triangles animation using just canvas and js. Explanation of Code The code starts with the statement 'use strict'; which enables strict mode, a way to introduce better error..
Add some sparkles to your text. Add some stars and rainbow colour effects to your text, source linked below.
Did you know that you can add smooth scrolling to your page with one line of css? So what is the magic line? scroll-behavior: smooth; Yep thats all you have to add. Lets add a demo of scro..
What is Radial Glow under cursor on box hover over effect? This code will allow the targeted boxes to have a radial glow effect on mouse over, so when you move your pointer over the box or element th..
What is Pure CSS 3D Flipping Book? Pure CSS 3D Flipping Book is a pure CSS and HTML flipping book animation that you can use to display content in a virtual book format. Preview a preview of Pure C..
Why would i want to use animations on my buttons? Button animations can be used for a variety of reasons. They can be used to add aesthetic appeal to a website or web application, or to provide a vis..
Creates a swing animation on focus. Use an appropriate transition to animate changes to the element. Use the :focus pseudo-class to apply an animation that uses ..
What is it? A button with a top and bottom border, when you mouse over it the border extends to the width of the button. Preview a preview of Animated Button Border when Active What can i use this..
What is it? Single Element CSS Spinners is a collection of loading animations made in css only, so no need for images or svg or any additional items, just one element added to you html and styled in ..
CSS Shake is a CSS library that allows you to shake your elements using css classes. Install <link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css"> El..
What is Animate.css? Its a css only animation library, just add the css and the classes and your animation needs should be good to go. Preview a preview of Animate.css What can i use this fo..
What is Check Wave? Check a box and watch the wave animation. Preview a preview of Check Wave What can i use this for? I cant actually think of a use case for this animation, but it looks cool! ..
Here is a typing animation, the only issue with this one is you need to add in the number of steps depending on the amount of characters in your string. So the text in the class typing-demo wil..
What is AnimXYZ? AnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless number of unique animations without writing a singl..
What is it? A Card element with a rotating drop shadow animation with colour changes. What can i use this for? You could use this animation to add some character to your own elements. Conc..
What is it? A Large collection of buttons with hover over animations and styles. What can i use this for? You can use these to make the buttons on your website or web project more animated Concl..
What is Nighttime Flows Animated SVG Background This is an animated SVG which is generated by this other pen here that generates a random SVG, when clicked it mentions to check the menu for the SVG b..
What is Animated Success Button with Confetti? This is a success button, well an action button that has a loading function as well as a success message and confetti when clicked, all contained within..
What is Sun Reflection CSS and HTML Only? This is a sun with an animated reflection done using css and html only What can i use this for? This could be modified to add some interest to a logo, or o..
Very slick Project management dashboard, showing some amazing UI Elements. Features Dark and Light Mode Listing Modes, in grid vs list Client Messages Popout section This is all in pure h..
An example using three js to create some 3D waves simulation, its like looking at a lava lamp. Or one of those games from 10 years ago...
a ken burns image effect with slow zoom in animations, you kind of look at this one and go, is that image actually moving, and yes, yes it is...
A snazzy looking image and content slider, with some nice content animations. Using GSAP for the animations, no JQuery required for this slider.
Another example of smooth animations using GSAP and Scroll Trigger. Good for scroll page animations. I cant get this one working correctly in the demo code, you will need to check out the pen ..
I am so excited about this carousel, it looks amazing! The 1st thing i thought when viewing this carousel, was wow, and the second thing i thought was what is GSAP. What is GSAP? Simply put, GSAP i..
Some very nice examples of button animations using the neumorphic style of design. Check out the original codepen here.
Found this awesome animated 404 error page on codepen the other day, crazily awesome animations on this one, just reload the demo page and you can see the animation as it loads in as well.