HTML5&CSS3 notes: CSS3 transitions, deformations, and animations __html

The current situation is that if you need some animation on the page, either you write JavaScript yourself or use JavaScript frameworks such as jQuery to improve efficiency.

However, while CSS3 cannot replace jQuery or similar frameworks in the short term, it is perfectly capable of doing things like smooth transitions (such as when hovering over a mouse) and moving elements on the screen. This is good news for us, and it means that in a growing number of devices that support modern browsers, we can use CSS instead of JavaScript to achieve animation.

Use pure CSS to do as much fun as JavaScript. As before, browsers that do not support these features are not affected, and they automatically skip unrecognized rules as if they were not there at all. What is a CSS3 transition and how to use it

When we set a style for a hyperlink, we generally set a hover state (hover) effect, which clearly alerts the user that his mouse is pointing to a hyperlink. Although it is not very useful for more and more touch-screen devices, this method is very simple and practical for the interaction between the website and the user.

Typically, a hover state is a switch when using CSS. It has a state by default, and then switches to another state as soon as the mouse hovers.

But using the CSS3 transition, as its name implies, allows the element to slowly transition from one state to another. This conversion is not limited to hover state.

First look at the hover effect:

#content a:hover {
    border:1px solid #000000;
    Color: #000000;
    text-shadow:0px 1px white;
}

Here you simply change the color of text, text shadows, and borders when you hover over the mouse. So, you might imagine, using this CSS code, when the mouse hovers over the button, the button will mutate directly from the first state to the second state--a switch effect. Let's add a little CSS3 to the first CSS rule:

#content a {/ 
    * ... Original style ... * * 
    transition:all 1s ease 0s;

Now hover the mouse over the button, and the color of the text, text shadow, and Border shadow will transition smoothly from the first state to the second state.

Note that the transition is applied to the element instead of the hover state hover. This is done so that other states of the element, such as active, can set different styles and have similar effects. So keep in mind that the transition declaration should be placed on the element where the transition effect begins.

. testcss{
    color:red;
    Transition:all 3s ease 0s;
testcss:hover{
    color:yellow;
}

transition-related properties

The CSS3 transition effect involves four properties, or you can use abbreviations that contain these four properties.

Transition-property: CSS property names to transition (such as Background-color, Text-shadow, or all, and the transition is applied to every possible CSS attribute);

Transition-duration: Defines the duration of the transition effect (in seconds, such as. 3s, 2s, or 1.5s);

Transition-timing-function: Defines how the transition period speed changes (e.g. ease, linear, ease-in, Ease-out, Ease-in-out, or cubic-bezier);

Transition-delay: Optional to define the delay time before the transition begins. Instead, setting the value to a negative number allows the transition effect to begin immediately, but the transition journey begins halfway through.

The syntax for creating transformation effects by using various transition properties alone is as follows:

#content a {
... Other styles ...
    Transition-property:all;
    Transition-duration:1s;
    Transition-timing-function:ease;
    transition-delay:0s;
}

As before, don't forget the private prefix of the browser. For example, after adding a browser private prefix to the previous shorthand statement, the code is as follows:

-o-transition:all 1s ease 0s; 
-ms-transition:all 1s ease 0s; 
-moz-transition:all 1s ease 0s; 
-webkit-transition:all 1s ease 0s; 
transition:all 1s ease 0s;

We put the standard version without the prefix on the last side, so that when the browser fully implements the standard, the code overwrites the previously prefixed version.

transition of different attributes over different time periods

When a rule implements multiple attribute transitions, these properties do not have to be in sync. Look at the following code:

#content a {/
    * ... Other Styles ... * *
    transition-property:border, color, Text-shadow; 
    TRANSITION-DURATION:2S, 3s, 8s;
}

understanding transition Speed governing functions

Ease, linear, ease-in, Ease-out, Ease-in-out, and cubic-bezier What are these things used for.
They are actually some kind of Bezier curve, essentially an easing function. Details Link: http://cubic-bezier.com/. 2D deformation of CSS3

Although two English words are similar in pronunciation, CSS variants (transformation, including 2D deformations and 3D variants) are completely different from CSS transitions (transitions). It can be understood that transition elements are smoothed from one state to another, while deformations define what the elements will become.

For example: 2D variants

Nav ul li a:hover {
    transform:scale (1.7);
}

Now if you try to add this rule to the Safari browser, be aware that it requires that the original elements of the rule must be displayed in chunks. If you do not do so, there is no effect.

What kind of deformation can we do ?

There are two available CSS3 variants: 2D deformations and 3D variants.

2d deformation of the implementation of a broader, better browser support, writing more simple. The CSS3 2D Transform module allows us to use the following variants:

Scale: For scaling elements (zooming
in or out) translate: moving elements on the screen (up or down four directions)
rotate: Rotate the element (in degrees) at a certain angle
skew: Skew
elements along the X and Y axes Matrix: Allows you to control the deformation effect with pixel accuracy

Scale:transform:scale (0.5);

Translate:transform:translate (40px, 0px);
Translate tells the browser to move elements in a certain measure, using pixels or percentages. The syntax is the first value that represents the distance to move from left to right (40 pixels in this case), and then the distance from the top down (0 pixels in this case).

Rotate:transform:rotate (90DEG)

Skew:transform:skew (10deg, 2deg);
It allows the element to deform on one or two axes. The first value is the skew on the x-axis (10 degrees in this case), and the second value is the diagonal cut on the y-axis (2 degrees in this case). Omitting the second value means that only the value is applied to the x-axis (horizontal orientation).

Matrix:transform:matrix (1.678,-0.256, 1.522, 2.333,-51.533,-1.989);
To fully understand the matrix you have to understand the relevant mathematical knowledge: http://www.w3.org/TR/css3-2d-transforms/#cssmatrix-interface.
If your math is not very good, I suggest you visit here: http://www.useragentman.com/matrix/.
Matrix Construction Set This site allows you to precisely drag elements into what you want, and then it automatically generates the perfect matrix code (the code contains the browser private prefix).

Transform-origin Properties:
You can also use the Transform-origin property to modify the starting point of the deformation effect while using the above deformation effect.
For more information on Transform-origin properties, see here: http://www.w3.org/TR/css3-2d-transforms/#transform-origin-property. try the CSS3 3D variant

The Webkit Core browser (Safari and Chrome) and the Firefox 10+ have both supported CSS3 3D variants, but the latest IE10 does not support this feature. Despite the lack of broad support for desktop browsers, the 3D variants are supported on Android (V3 versions) and IOS (all versions), thanks to the basic Webkit lineage of mobile platform browsers.

Instance code:

Html

<section class= "Qcontainer" >
  <div class= "film" >
    <div class= "Face front" >
      
    </div>
    <div class= "Face Back" >
 
Css

. Qcontainer {
    height:100%;
    width:28%;
    position:relative;
    -webkit-perspective:800;
    Float:left;
    margin-right:2%
}
. Film {
    width:100%;
    height:15em;
    -webkit-transform-style:preserve-3d;
    -webkit-transition:1s
}
. Qcontainer:hover. Film {
    -webkit-transform:rotatey (180deg);
}
. Face {
    position:absolute;
    -webkit-backface-visibility:hidden
}
. back {
    width:66%;
    height:127%;
    -webkit-transform:rotatey (180deg);
    Background: #3b3b3b;
    Background:-webkit-linear-gradient (top,
        rgba (0,0,0,0.65) 0,
        Rgba (0,0,0,0) 100%);
    padding:15%;
}
 
After the code is deployed, hover the mouse over the picture, and you'll see the picture flip to the back and show the results of the movie.

Here's a look at the code to see how the 3D distortion effect is achieved.

The first point is to set the perspective on the parent element. This opens the 3D scene:

. Qcontainer {
    height:100%;
    width:28%;
    position:relative; 
    -webkit-perspective:200; <--This is the key
    Float:left;  
    margin-right:2%;
}
 
The larger the value of the perspective, the greater the depth of your perspective and the 3D scene. So, if you want a vaguely 3D effect, increase the pivot value, or decrease the pivot value if you want a very obvious 3D effect. (The three-dimensional 3D effect depends on the distance between the 3D scene and The Observer.) )

Next point:

. film {
     width:100%;
     height:15em;
     -webkit-transform-style:preserve-3d;<--This is the key
     -webkit-transition:1s;
 }
 
. The pivot declaration added in the Qcontainer class is applied only to its first child element (that is, the class in this example is. Film Div). Therefore, in order to extend the perspective of the parent element, we set the Preserve-3d to the. Film element (so that a 3D scene can be set).

Next, when the mouse hovers over the. Qcontainer module, we give. Film this div add a rollover effect:

. Qcontainer:hover. Film {
    -webkit-transform:rotatey (180deg);
}
 
The following rules are used to deal with what is hidden on the back of a poster when it is flipped:

. face {
    position:absolute; 
    -webkit-backface-visibility:hidden;
}
 
. Face must use absolute positioning, so that the poster can be built on the top of the. Back div:

. back {
    width:66%;
    height:127%;
    -webkit-transform:rotatey (180deg);
    Background: #3b3b3b;
    Background:-webkit-linear-gradient (Top,rgba (0,0,0,0.65) 0%,rgba (0,0,0,0) 100%);
    padding:15%;
}
 
Finally, we give the. Back this div also adds Rotatey. If you do not add this sentence, the DIV will be displayed on top of the front poster.

We can use a little traditional CSS code for the Webkit core browser to provide a reasonable downgrade scheme.

3D deformation is not yet ripe, most 3D variants do not work well when using a percentage size. But the future of the CSS3 3D variant is bright, and when browsers begin to support it, it gives us a rare opportunity to migrate the elegant effects that now depend on JavaScript into the stylesheet. CSS3 Animation effect

Compared to 3D distortion, CSS3 animation has a higher degree of browser support. Firefox 5+, Chrome, Safari 4+, Android (all versions), IOS (all versions) supported, IE 10 also decided to join the ranks.

The CSS3 animation consists of two parts: first, the keyframe declaration, and then the Keyframe declaration is used in the animation properties.

In the previous section we made a simple flip effect to show how I judged the film. But the back text of the flip effect is ugly, so let's add an interesting blinking effect to the text.

The first is the key-frame rule:

@keyframes Warning {
  0% {
    text-shadow:0px 0px 4px #000000;
  }
  50% {
    text-shadow:0 0 20px #000000;
  }
  100% {
    text-shadow:0px 0px 4px #000000;
  }
}
 
The code here is not prefixed, and if there is no effect in the browser, you may want to add a complete set of browser private prefixes (such as @-webkit-keyframes).

Analyze the code above.

First, we define a @keyframes (keyframe) declaration. Then set a name for this particular keyframe declaration: warning. You can call it any name, but given that these key frame statements can be reused on multiple elements, it is advisable to take a reasonable name.

You can set multiple keyframes (such as percent values 10%, 20%, 30%, 40%, and so on), or you can use the From and to values to define the start and end frames of an animation. Note, however, that Webkit browsers use the From and to values in cases where the effect is not guaranteed.

This example adds a little animation to the text shadow, which starts with a 4 pixel shadow, then changes to 40 pixel shadows with 50% of the time, and then changes back to 4 pixel shadows.

We've declared the keyframe, and then we can reference it in the animation properties:

. Back h5 {
    font-size:4em;
    Color: #f2050b;
    Text-align:center;
    Animation:warning 1.5s infinite ease-in;
}
 
After the animation attribute, we set the keyframe to use (the warning in the example), then set the animation duration (1.5s), then set the Animation-iteration-count (we used the infinite Let the animation loop continuously, and finally set the speed regulating function (ease-in).

The CSS3 animation abbreviation syntax can accept the values of all 7 independent animation properties.
In addition to the one used in the previous example, you can also set the Animation-delay (the delay before the animation starts), Animation-play-state (the value can be running or paused to control animation playback and pausing), and finally Animation-fill-mode, this attribute has not been found to be useful until now (the default is None). Of course, you can simply list them one by one, without using the abbreviation syntax.

animation-name:warning;
animation-duration:1.5s;
Animation-timing-function:ease-in-out;
Animation-iteration-count:infinite;
animation-play-state:running;
animation-delay:0s;
Animation-fill-mode:none;
 
This is just a simple example of using CSS3 animations. In fact, any CSS attribute can be used in key-frame animations, so there are infinite possibilities.

There are countless examples of CSS3 animation techniques on the web, such as Http://webdesignerwall.com/trends/47-amazing-css3-animation-demos, which is enough to provide you with a rich CSS3 animation inspiration.