CSS transitions, basic properties and the use of animation and deformation

[] Classes against the war

Animation can make an element having a dynamic effect, this process is the process to become an element of style from one style to another. We can control the motion animation node at a time by setting keyframes way. Typically a plurality of nodes to implement complex animations. 0% is the start time of the animation, the animation is done 100%.

A, transition (transition)

transition contains four main attributes:

Properties to perform transformations: transition-property

Name prescribed set of CSS properties transition effects. all (default value), specified width, height;

Transition time: transition-duration

How many seconds or milliseconds to complete the transition provisions of the desired effect.

Rate of change: transition-timing-function

Predetermined speed velocity profile effect. Form of exercise: acceleration, deceleration, constant speed ...

liner (uniform)

ease (default value)

ease-in (acceleration)

ease-out (reduction)

ease-in-out (acceleration and deceleration)

cubic-bezier (custom property values)

Transformation delay time: transition-delay

Defines when the transition effect starts. For example: 1s: 1 second delay transition, -1s: 1 second before the transition

Here to do a simple case:

First, the definition of a container

<body>

    <div id="box"></div>

</body>

Was then added and background color transition property to the container

<style>

    #box{ width:100px; height: 100px; background:red;

        transition-duration : 2s;

        transition-property : all;

        transition-delay: 1s;

        transition-timing-function: linear;

    }

    </style>

When the mouse into the container to change the size and background color

#box:hover{width: 200px;

    height: 200px;

    background-color: blue;}

This made a simple case, when the mouse moved into larger containers will be in two seconds, and the background color turns blue

Two, animation (animation)

1. Define animation track

@keyframes name {

        0% {}

        100% {}

    }

2. Call Animation

animation-name: Set the name of the animation

animation-duration: duration of the animation

animation-delay: delay time animation

animation-iteration-count: the number of repetitions of the animation, the default value is 1, infinite Unlimited

animation-timing-function: movement in the form of animation

liner (uniform)

ease (default value)

ease-in (acceleration)

ease-out (reduction)

ease-in-out (acceleration and deceleration)

#box2{ width:100px; height:100px; background:red;

animation-name: name;

animation-duration: 2s;

animation-delay: 3s;

animation-iteration-count: infinite;

animation-timing-function: linear;

}

Three, transform (deformation)

translate: Displacement

transform: translate (X, Y); the element is moved to the specified point

transform: translateX (X); element moves along the X-axis

transform: translateY (Y); element moves along the Y axis

transform: translateZ (Z); element along the Z axis (3D)

scale: Scale

transform: scale (num) num is a scale value, the normal ratio is 1.

transform: scale (num1, num2) corresponding to two values of width and height, respectively,

transform: scaleX () is defined by setting the value of the X-axis scale transformation.

transform: scaleY () is defined by setting the value of the Y-axis scale transformation.

transform: scaleZ () is defined by setting the value of the Z-axis scale 3D conversion.

rotate: rotation

transform: rotate (num) num rotation angle unit: deg, value: clockwise rotation, negative: counterclockwise rotation

rotateX () is defined along a 3D X-axis rotation.

rotateY () is defined along the rotation axis of 3D Y.

rotateZ () is defined along the rotation of Selection 3D Z.

skew: miter

transform: skew (num1, num2): num1 and num2 are angles for the x and y

transform: skewX () is defined along the X-axis tilt conversion.

transform: skewY () is defined along the Y-axis tilt conversion.

Note: skew no 3d writing.

tranform-origin: bps

tranform-origin (x, y, z) point moving element is provided, a default value: center, center, 0

@keyframes name {

        0% { transform:translate(0,0); }

        25%{ transform:translate(300px,0); }

        50%{ transform:translate(300px,300px); }

        75%{ transform:translate(0,300px); }

        100% { transform:translate(0,0);}

    }

Four, 3D animation

Perspective (depth): the distance from the screen to observe how far the element, the smaller the value, the more significant.

transform-style: 3D space: flat (Default 2d), preserve-3d (3d, generating a three-dimensional space)

perspective-origin: depth - the home position, the angle of observation elements. Value: left, right, top ......

backface-visibility: hidden back hidden, visible (default value)