Unconfigured Ad Widget

Collapse

Anúncio

Collapse
No announcement yet.

Criando animações com CSS

Collapse
X
 
  • Filter
  • Tempo
  • Show
Clear All
new posts

  • Font Size
    #1

    Tutorial Criando animações com CSS

    Olá, trago mais um tutorial de desenvolvimento web, hoje sobre animação em CSS

    Pra começar vamos programar a animação usando o @keyframes, assim:

    Dentro de <style></style> coloque isso:
    Código:
      @keyframes nome_da_animacao{
      0%{
    }
     25%{
    }
     50%{
    }
     75%{
    }
     100%{
    }
    }
    Como pode perceber o keyframes é definido por porcentagem, usei como exemplo as porcentagens 0, 25, 50, 75 e 100.
    Assim, você trabalha com os efeitos de acordo com a porcentagem definida para a mudança.

    Agora criamos o elemento que recebe a animação, no caso uma div:

    Entre as tags <body> e </body> coloque:
    Código:
    <div></div>
    Voltamos para o CSS e adicionamos o elemento, já fazendo a chamada da animação, assim:
    Código:
     div{
     animation: nome_da_animacao     duracao    timing_function*    delay   contagem   direcao
    }
    * timing_function é uma forma de tratamento do tempo, como "linear" que faz tudo fluir sem efeito de tempo, ou "ease-in" que faz um efeito de freeze no tempo e volta com aceleração no fim da animação.

    Agora vamos preencher os valores da animação e definir um estilo para "div":
    Código:
    	div{
    		background: #fff;
    		width: 15px;
    		height: 15px;
    		margin: 2em;
    		border: 10px solid #8ac;
    		box-shadow: 0 0 0 10px #f00;
    		border-radius: 100%;
    		animation: mudamuda 0.7s linear 0.1s infinite alternate;
    	}
    E a partir disso programar a animação
    Código:
    	@keyframes mudamuda{
    		0%{
    		background: #f00;
    		border: 10px solid #fff;
    		box-shadow: 0 0 0 10px #8ac;
    		}
    		25%{
    		background: #8ac;
    		border: 10px solid #f00;
    		box-shadow: 0 0 0 10px #fff;
    		}
    		50%{
    		background: #fff;
    		border: 10px solid #8ac;
    		box-shadow: 0 0 0 10px #f00;
    		}
    		75%{
    		background: #f00;
    		border: 10px solid #fff;
    		box-shadow: 0 0 0 10px #8ac	;
    		}
    		100%{
    		background: #fff;
    		border: 10px solid #8ac;
    		box-shadow: 0 0 0 10px #f00;
    		}
    	}
    O resultado você Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...

    Este é só um exemplo de animação, dá pra se fazer coisas incríveis com esse método.
    Last edited by Linha.direta; 16-02-2019, 19:58. Motivo: Um errinho pequeninho

    Engenharia Social - Web Design - Programmer
    __________________________________________________ __________

    sigpic
    Similar Threads
X
Working...
X