Hoje, quero usar o css3 para obter o efeito de vibração do elemento à esquerda e à direita, primeiro olhe para a descrição das propriedades de animação em css3:
- Regras do CSS3 @keyframes
Para criar animações em CSS3, você precisa aprender as regras do @keyframes.
A regra @keyframes é usada para criar animações. Ao especificar um certo estilo CSS em @keyframes, você pode criar um efeito de animação que muda gradualmente do estilo atual para o novo estilo.
Internet Explorer 10, Firefox e Opera oferecem suporte a regras @keyframes e atributos de animação.
O Chrome e o Safari precisam do prefixo -webkit- @ keyframes.
Instância
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
A animação é o efeito da mudança gradual dos elementos de um estilo para outro.
Você pode alterar qualquer número de estilos qualquer número de vezes.
Use uma porcentagem para especificar a hora em que a alteração ocorre ou use as palavras-chave "de" e "para", que são equivalentes a 0% e 100%.
0% é o início da animação e 100% é a conclusão da animação.
Para obter o melhor suporte ao navegador, você deve sempre definir os seletores de 0% e 100%.
Exemplo
Altere a cor do plano de fundo quando a animação estiver 25% e 50% e, em seguida, altere-a novamente quando a animação estiver 100% concluída:
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
Exemplo de propriedade de animação CSS3
Execute a animação chamada myfirst com todas as propriedades da animação definidas:
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
O acima é configurado de acordo com as propriedades padrão da animação, e também pode ser escrito de forma abreviada:
O exemplo
é igual à animação acima, mas usa a propriedade de animação abreviada:
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}
Vamos entrar no tópico principal abaixo. Fale sobre como fazer o elemento tremer para a esquerda e para a direita:
primeiro defina @keyframes e as propriedades de animação do elemento
<style>
.weui-badge{
display:inline-block;
padding:.15em .4em;
min-width:8px;
border-radius:18px;
background-color:#F43530;
color:#FFFFFF;
line-height:1.2;
text-align:center;
font-size:12px;
vertical-align:middle;
animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite;
transform-origin:bottom;-webkit-transform-origin:bottom;
}
@keyframes move
{
0%, 65%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
70% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
75% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
80% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
85% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
90% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
95% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
100% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
}
@-webkit-keyframes move
{
0%, 65%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
70% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
75% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
80% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
85% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
90% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
95% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
100% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
}
</style>
A análise do código pode ser vista. Ao definir a regra @keyframes, o elemento não terá ação em 0% -65%, ou seja, nenhum ângulo de rotação, começando em 70% -100% e balançando
em 6 graus. Defina a animação no estilo weui-badge estilo da seguinte forma:
animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite;
transform-origin:bottom;
-webkit-transform-origin:bottom;
Ou seja, usando a regra @keyframes, defina a animação para completar uma ação de ciclo como 3s, defina a animação para começar em 0s e especifique que a animação deve ser reproduzida infinitamente (infinito).
Definir origem da transformação: fundo para definir o ponto base da rotação do elemento como o ponto central inferior. O valor padrão é o ponto central do elemento.