animación de transición CSS3 CSS3 transformar transformar, animación animación CSS3

animación de transición CSS3

1, la transición de propiedad propiedades de transición conjunto, tales como: fondo anchura-altura de color
2, duración de la transición-set tiempo de transición, tales como: LS 500 ms
. 3, la función de transición-Timing de movimiento se proporciona en la transición

uniforme lineal
comienzo lento y facilidad finales
la facilidad en que es muy lento al principio
Slow al final de la facilidad de salida
la facilidad de entrada-salida al principio y al final de una lenta
cúbico-Bezier (n, n, n, n)
- 比如: cúbico-Bezier (0,845, -0,375, 0,215, 1,335)
- Curva creó un sitio web: https://matthewlein.com/ceaser/

4, el retardo proporcionado animado transición de retardo
5, la transición: duración propiedad timing- retardo de función y fijados cuatro propiedades

Por ejemplo:

<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 transformar la transformación

1, se proporciona traducir (x, y) de desplazamiento del cartucho
2, escala (x, y) de la caja zoom dispuesta
3, rotate (deg) dispuestos cuadro de rotación
4, de inclinación (x-ángulo, y-ángulo) caja de ingletes dispuesta
5, perspectiva el establecimiento de una perspectiva desde
6, plana de estilo transformar | conservan -3d configuración del cuadro de si el espacio de prensa 3d de la pantalla
7, translateX, translateY, translateZ proporcionado movimiento tridimensional
8, rotateX, rotateY, rotateZ proporcionan rotación tridimensional
9, scaleX, scaleY, scaleZ dispuesta de escala dimensional
10, la deformación TRANFORM-origen del punto central
11, la superficie posterior de la cara posterior-visibilidad de la caja es visible está provisto

Ejemplos :( efecto inversora)

<!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>

animación animación CSS3

1, @ fotogramas clave definidas animación de fotogramas clave
2, nombre animación-nombre de la animación
3, el tiempo de animación animación-duración
4, animación-timing-función de curva de animación

uniforme lineal
comienzo lento y facilidad finales
la facilidad en que es muy lento al principio
Slow al final de la facilidad de salida
la facilidad de entrada-salida al principio y al final de una lenta
Animación pocos pasos pasos

5, la animación de retardo de retardo animación
6, animación-iteración-contar el número de veces que la animación para jugar el n- | Infinito
7, Animación dirección

El final normal por defecto de la animación no devuelve
retorno alternativas después del final de la animación

8, animación estado de animación-play-Estado

parada en pausa
corriendo el deporte

9, los estados antes y después de la animación, llenado y el modo de animación

Ninguno No cambie el comportamiento predeterminado
Cuando después de la finalización hacia delante, sosteniendo el último atributo (como se define en el último fotograma clave)
hacia atrás en el período especificado animación de retardo, antes de la animación, el valor de la propiedad inicio de la aplicación (que se define en el primer fotograma clave)
llenar tanto hacia delante como se aplican modos atrasadas

10, la animación: Nombre del retardo duración de temporización-función de dirección iteración-count; también estableció una pluralidad de atributos

Por ejemplo :( Personas animación pie)

<!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>

imágenes de animación utilizadas son las siguientes:

Cuadros de la muestra

Nota: la comprensión personal

. 1, transformar las variaciones estáticas con las animaciones de transición, la porción de operación: se genera (transfrom rotateY ()) de salto de la transformada necesidad de establecer los valores iniciales.

2, perspectiva vista en perspectiva dispuesta desde la perspectiva (800), transformación de-estilo plano | preservar-3d espacio 3D proporcionado por la caja si la pantalla.