CSS3 animação de transição, CSS3 transformar transformar, animação animação CSS3

animação transição CSS3

1, as propriedades de transição conjunto de transição de propriedades, tais como: fundo largura-altura Cor
2, duração da transição-conjunto de tempo de transição, tais como: ls 500ms
. 3, a função de transição-Timing-movimento é fornecido na transição

uniforme linear
início lento e facilidade final
aliviar-in é lento para iniciar
Lento no final da facilidade-out
aliviar-in-out no início e no final de uma lenta
cúbicas de Bezier (n, n, n, n)
- 比如: cúbico-Bezier (0,845, -0,375, 0,215, 1,335)
- Curva criar um site: https://matthewlein.com/ceaser/

4, o atraso fornecida animado de transição de atraso
5, transição: duração propriedade timing- atraso função e fixados quatro propriedades

Por exemplo:

<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 transformação

1, traduzir (x, y) de deslocamento do cartucho é fornecido
2, escala (x, y) da caixa de zoom dispostas
três, rotação (graus) disposta caixa rotativa
4, inclinação (x-ângulo, y-ângulo) caixa de esquadria disposta
5, em perspectiva definindo uma perspectiva de
6, transformar-estilo plana | preservar -3D configurações da caixa de se pressionar espaço 3D do display
7, translateX, translateY, translateZ fornecido movimento tridimensional
8, rotateX, rotateY, rotateZ fornecido rotação tridimensional
9, scaleX, scaleY, scaleZ eliminados escala dimensional
10, a deformação tranform-origem de ponto de centro
11, a superfície traseira backface-visibilidade da caixa é visível é fornecido

Exemplos :( efeito invertendo)

<!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 definidos quadrochave animação
2, nome animação-nome da animação
3, animação-duração de tempo de animação
4, animação-sincronismo-função curva animação

uniforme linear
início lento e facilidade final
aliviar-in é lento para iniciar
Lento no final da facilidade-out
aliviar-in-out no início e no final de uma lenta
Animação poucos passos passos

5, animação atraso atraso de animação
6, animação iteração contar o número de vezes que a animação para jogar o n- | Infinito
7, Animação direção

O fim normal padrão da animação não retorna
retorno alternativo após o final da animação

8, animação status de animação-play-state

parada em pausa
esporte funcionar

9, estados antes e após a animação-fill-mode animação

Nenhum Não altere o comportamento padrão
Quando depois de conclusão para a frente, segurando o último atributo (tal como definido no último quadro)
para trás no período animação-atraso especificado, antes de animação, o valor da propriedade início aplicação (definido no primeiro quadro de chave)
preenchimento tanto para a frente e para trás são aplicados modos

10, animação: nome atraso de função de temporização duração direcção iteração de contagem; também definir uma pluralidade de atributos

Por exemplo :( Pessoas curta de animação)

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

imagens de animação usadas são as seguintes:

amostras de Imagens

Nota: compreensão pessoal

. 1, transformar as variações estáticos com as animações de transição, a porção de operação (transfrom: rotateY ()) é gerado movimentada transformar necessidade de definir valores iniciais.

2, em perspectiva vista em perspectiva dispostas de perspectiva (800), transformar-estilo plana | espaço 3d preservar-3d fornecida pela caixa se o visor.