50 Awesome animation effects tutorials with CSS3

These 50 CSS animation collections allow you to animate your animations by using JavaScript functions. To be able to preview the animated effects of these amazing CSS3 technologies, please use the WebKit kernel-based browser such as Safari and Chrome. (ie declined to watch ~)

1.CSS3 realization of clock effect (based on jquery)

Basic deformation characteristics using CSS3: Rotate, combined with the CSS3 clock effect created by the JavaScript framework such as jquery.

2. Analog clock

The analog clock is based on the transition WebKit and CSS3 variants, and JavaScript is used to rotate it at the current time.

3.3D cubes that can be rotated using the arrow keys

You can use the up, down, left, and right arrow keys to control this 3D cube, which is created based on Webkit-perspective,-webkit-transform and-webkit-transition.

4. Multiple 3D cubes (fade in)

A variety of 3D cubes using CSS3 and its properties ' transform ' and ' transition ', I personally feel the effect is very shocking, you can see writing on the 3D Cube on the perspective of very strong text.

5.CSS3 Accordion Effect

Accordion menu effect using CSS3, based on WebKit browser proprietary properties.

6. Auto-scrolling parallax effect

The auto-scrolling parallax effect uses the WebKit CSS transition property. This effect does not require JavaScript.

7.Isocube

Isocube is somewhat similar to a 3D cube, but there are differences, and it allows him to stick to the cube surface.

8.CSS3 Picture Collection

9.CSS3 matrix (Matrix effect)

The Hacker Empire is one of the best science fiction adaptations, and now uses pure CSS to achieve matrix effects in movies.

10.7 Types of CSS3 combined with JavaScript technology

7 examples of CSS3 combined with JavaScript technology. Included effects include fade, vibrate, nudge, expand, bounce, rotate and accordion effects.

11. Various mouse hover picture effects

Six CSS3 replaced JavaScript by the mouse hover picture effect, CSS3 realize this hover effect is still very dazzle!

12. Revolving Coca-Cola cans (using scroll bar control)

13.3D Maid of the Palace

14. PO Lee Gallery

The Polaroid Gallery is implemented by CSS3 technology to stack some photos together, and the interesting thing is that the hover photo is, the photo will rotate and slowly zoom in ~

15. Space

16.Mac Dock

CSS3 analog Mac OS menu ...

17.drop-in modals

18. Slide the Record

The effect uses a CSS3 transition and a bit of HTML, and putting a record album on it will look more vivid.

19.CSS3 zooming Polaroids

The effect arranges a list of photos in order and rotates them at different angles, using CSS2 and CSS3 techniques, without JavaScript. It reads out the photo description from the alt attribute of the picture and places it underneath the photo.

20.CSS3 Rocket Animation

21.Poster Circle

22. Deformed cubes

23. Animated version of Polaroid Gallery

24. The projection effect in the spotlight

25. Brightly colored clocks

26.Lightbox Gallery

27. Elastic thumbnail Menu

28.Coverflow

29.jQuery DJ Hero

30.Dynamic Stacking Cards

31. Another CSS3 image gallery effect

32. Snow Drift (using the direction key control)

33.CSS3 Animation edition Price bar

34. Smooth JQUERY+CSS3 Menu

35.CSS tags (no javascript)

36.CSS Label menu (no JavaScript)

37.SVG+CSS3 Fish Eye Menu

38.CSS3 Deciduous effect

39.CSS3 Rotation Atlas Effect

40.CSS3 drop-down menu

41. Star Wars Style crawling text (pure html+css)

42.CSS3 Instant Stickers

43.CSS3 Snowflake

44. Another fish eye effect

45.CSS3 per-frame animation

The first CSS3 per-frame animation instance requires you to continue using the mouse to click on the picture, when playing to the last frame it will automatically play the first frame, so loop, but the first instance can only be implemented in Firefox and opera. The second CSS3 per-frame animation instance requires you to use the mouse to move on the picture, is still mousemove this action, as long as the mouse in the mobile image animation will continue to play, but the speed of the animation is related to the speed of your mouse movement, the instance supports Safari, Google Chrome, IE8, Firefox and Opera.

46. All-Terrain armored vehicles

47. Another CSS3 accordion effect

48. No flash version of dynamic display

49. Smoothing the menu bar

50.loading Rotation effect

Reproduced in original: using CSS3 to make 50 super-awesome animation effects tutorial (Bin go)

50 Awesome animation effects tutorials with CSS3