Praise! 15 Cool CSS animations from Codepen

Codepen is an online front-end code editing and presentation site that can write code and instantly preview the effect. You can share your Web work online and enjoy the amazing results that great developers around the world have achieved on the Web.

Today this article for you to choose 15 super-cool CSS Animation effect examples, these demos can be said to be art. (For best results, browse in modern browsers such as Chrome, Firefox, and Safari)

1. JavaScript Mickey Watch

Apple watch like Mickey watch by Jay Salvat (@jaysalvat).

Mickey Mouse is very familiar with the Disney animated image. This is a lovely effect, combining CSS & SVG graphics to achieve the Mickey Mouse watch effect.

2. CSS submarine

Submarine with CSS by Alberto Jerez (@ajerez).

This is a comprehensive use of CSS various properties of the implementation of the submarine animation, is not very realistic ah?

3. ASCII At-at

At-at by Tim Pietrusky (@TimPietrusky).

Inspired by Star Wars, using CSS to write the people transporter effect, using a variety of text colors, a trendy effect.

4. Svg/css Loader

Loader svg/css by Bidji (@Bidji).

The loading effect gives the impression of being rotated by using a transformed color.

5.3D CSS Tardis

3D CSS Tardis by Gerwin van Royen (@Gerwinnz).

CSS can be used to make a variety of interesting 3D effects, which is a 3D TARDIS (Time Machine and spaceship in English sci-fi TV series).

6. Dozing Bird

Dozing Bird by Peter Klein (@pmk).

The simple art style, coupled with an appropriate amount of animation, gives this sleepy bird a life illusion.

7. Pure CSS Border Animation

Pure CSS Border animation without SVG by Rplus (@rplus).

Simple and very efficient Loading-style animations created using CSS borders.

8. Star wars:the Force Awakens

Star wars:the Force Awakens in CSS by Donovan Hutchinson (@donovanh).

Use CSS, HTML and JavaScript to create the title effect of Star Wars movie titles.

9.3D Synth

Pure CSS 3D Synthesizer (MouseDown for rotation) by Nikolay Talanov (@suez).

Using the 3D keyboard effect made with pure CSS, click the mouse to rotate.

Ten. Cascading Solar System

Cascading Solar system! by Tady Walsh (@tadywankenobi).

The model of the solar system completes the rotation speed, the satellite and the details of each large planet. It looks like real-world stuff!

One . 3D Solar System

Full CSS 3D Solar System by Wayne Dunkley (@waynedunkley).

Another solar system model, but this one is 3D and has a beautiful shadow effect.

Flat Design Camera

Flat design camera with CSS animation by Damien Pereira Morberto (@damienpm).

Use CSS animations to simulate the animation of a photo by pressing the shutter on the camera.

Day and night Transition

Day night Simulation by Szymon Stypa (@Catagen).

Click on the buttons below to see the effects of day and night simulations.

animated Sprite with CSS

Animate Sprite with CSS by Avaz Bokiev (@samarkandiy).

The model sequence image (Sprite) can be used to create a stop animation with forward and reverse motions.

dodecahedron.

Dodecahedron by Wontem (@wontem).

A subtle, beautiful 12-body animation created entirely with CSS.

Related articles that may be of interest to you

• The JQuery effect "attached source" is very useful in website development
• Share 35 amazing CSS3 animation effects Demo
• Stunning 8 x HTML5 & JavaScript Effects
• Web development in a very practical 10 effects "source Download"
• 12 Classic white-rich jQuery images Carousel Plugin

This article link: Likes! 15 Cool CSS animation effects from Codepen

Compilation Source: Dream Sky focus on front-end development technology sharing web design resources

"http://www.cnblogs.com/lhb25/" from the source of this article

Praise! 15 Cool CSS animations from Codepen