CSS3 transition animation, CSS3 transform transform, CSS3 animation animation

CSS3 transition animation

1, transition-property set transition properties, such as: width-height background Color
2, DURATION Transition-set transition time, such as: lS 500ms
. 3, Transition-Timing-motion function is provided in the transition

linear uniform
Slow start and end ease
ease-in is slow to start
Slow at the end of ease-out
ease-in-out at the beginning and end of a slow
cubic-bezier(n,n,n,n)
- 比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)
- Curve set up a website: https://matthewlein.com/ceaser/

4, the delay provided animated transition-delay
5, transition: property duration timing- function delay and set four properties

For example:

<style type="text/css">        
.box{
    width:100px;
    height:100px;
    background-color:gold;
    transition:width 300ms ease,height 300ms ease 300ms,background-color 300ms ease 600ms;            
}
.box:hover{
    width:300px;
    height:300px;
    background-color:red;
}
</style>
......
<div class="box"></div>

CSS3 transform transformation

1, translate (x, y) displacement of the cartridge is provided
2, scale (x, y) disposed zoom box
3, rotate (deg) disposed rotating box
4, skew (x-angle, y-angle) disposed miter box
5, perspective setting a perspective from
6, transform-style flat | preserve -3d settings box whether press 3d space of the display
7, translateX, translateY, translateZ provided three-dimensional movement
8, rotateX, rotateY, rotateZ provided three-dimensional rotation
9, scaleX, scaleY, scaleZ disposed dimensional scaling
10, tranform-origin deformation of center point
11, backface-visibility back surface of the box is visible is provided

Examples :( inverting effect)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻面</title>
    <style type="text/css">
        .box{
            width:300px;
            height:272px;
            margin:50px auto 0;
            transform-style:preserve-3d;
            position:relative;            
        }
        .box .pic{
            width:300px;
            height:272px;
            position:absolute;
            background-color:cyan;
            left:0;
            top:0;
            transform:perspective(800px) rotateY(0deg);
            backface-visibility:hidden;
            transition:all 500ms ease;
        }
        .box .back_info{
            width:300px;
            height:272px;
            text-align:center;
            line-height:272px;
            background-color:gold;
            position:absolute;
            left:0;
            top:0;
            transform:rotateY(180deg);
            backface-visibility:hidden;
            transition:all 500ms ease;            
        }
        .box:hover .pic{
            transform:perspective(800px) rotateY(180deg);
        }
        .box:hover .back_info{
            transform:perspective(800px) rotateY(0deg);
        }
    </style>
</head>
<body>
    <div class="box">        
        <div class="pic"><img src="images/location_bg.jpg"></div>
        <div class="back_info">背面文字说明</div>
    </div>
</body>
</html>

CSS3 animation animation

1, @ keyframes defined keyframe animation
2, animation-name name of the animation
3, animation-duration time animation
4, animation-timing-function animation curve

linear uniform
Slow start and end ease
ease-in is slow to start
Slow at the end of ease-out
ease-in-out at the beginning and end of a slow
Animation few steps steps

5, animation-delay animation delay
6, animation-iteration-count the number of times the animation to play the n-| Infinite
7, Animation-direction

The default normal end of the animation does not return
Alternate return after the end of the animation

8, animation-play-state status animation

paused stop
running sport

9, states before and after the animation-fill-mode animation

none Do not change the default behavior
When after completion forwards, holding the last attribute (as defined in the last keyframe)
backwards in the specified animation-delay period, prior to animation, the application start property value (defined in the first key frame)
filling both forward and backward modes are applied

10, animation: name duration timing-function delay iteration-count direction; also set a plurality of attributes

For example :( People walking animation)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走路动画</title>
    <style type="text/css">        
        .box{
            width:120px;
            height:180px;
            border:1px solid #ccc;            
            margin:50px auto 0;
            position:relative;
            overflow:hidden;            
        }

        .box img{
            display:block;
            width:960px;
            height:182px;
            position: absolute;
            left:0;
            top:0;
            animation:walking 1.0s steps(8) infinite;            
        }
        @keyframes walking{
            from{
                left:0px;
            }

            to{
                left:-960px;
            }
        }
    </style>
</head>
<body>
    <div class="box"><img src="images/walking.png"></div>
</body>
</html>

Animation images used are as follows:

Sample Pictures

Note: Personal understanding

. 1, transform the static variations with the transition animations, the operation portion (transfrom: rotateY ()) is generated hopping transform need to set initial values.

2, perspective disposed perspective view from perspective (800), transform-style flat | preserve-3d 3d space provided by box whether the display.