CSS keyframes Animated Example Tutorial

In CSS animation, the use of transition technology is an "implicit" animation method, and the corresponding, there is an "explicit" animation technology, you can directly specify the animation in CSS, which requires the use of the KeyFrames property.

Demo: Autumn Leaf falling animation

The above "Autumn leaf falling animation" of the CSS animated presentation should be very exciting, fully demonstrated the excellent characteristics of CSS animation.

Let's take a step-by-step article on how to make keyframes animations, starting with a bouncing box.

Demo: Bouncing Box

Using CSS to declare such animations is very simple. First, describe the animation effect rule with @keyframes.

@keyframes Bounce {from {   left:0px;} to {   left:200px;}}

In a @keyframes code block, contains a series of CSS rules, collectively known as keyframes. A keyframe defines an animated style for a moment in a complete animation. The animation drawing engine consistently and smoothly implements transitions between various styles. In the above animation defined as "bounce", there are two keyframes: one is the starting state of the animation (the "from" code block) and the terminating state ("to" code block).

Once the definition has finished animating, we can use Animation-name to associate it with the animation target element.

p {animation-name:bounce; animation-duration:4s; animation-iteration-count:10; animation-direction:alternate;}

The above CSS rule is bound to the "bounce" animation, but also set the duration of the animation for 4 seconds, a total of 10 times, and the interval of the reverse execution.

Below, we want to make a more complex animation, involving rotation, background color, transparency and other technologies, need to use multiple keyframes.

@keyframes Pulse {0% {   background-color:red;   opacity:1.0;   Transform:scale (1.0) rotate (0deg); } 33% {   background-color:blue;   opacity:0.75;   Transform:scale (1.1) rotate ( -5deg); } 67% {   background-color:green;   opacity:0.5;   Transform:scale (1.1) rotate (5deg); } 100% {   background-color:red;   opacity:1.0;   Transform:scale (1.0) rotate (0deg); }}.pulsedbox {animation-name:pulse; animation-duration:4s; animation-direction:alternate; Animation-timing-function:ease-in-out;}

The keyframes here uses percentages, respectively, to represent the action scenes for each stage of the animation. The previous "from" and "to" keywords are actually equivalent to "0%" and "100%".

CSS keyframes animations are designed to provide a way for web developers to create colorful page effects more easily. Most animation effects are expressive and therefore belong to the browser style system. Programmers can create these effects animations with a simple declarative style that completely replaces the previous manual implementation of JavaScript technology.

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial