Animações Views, Move, Line
- Anime Line
- Anime Move
- Anime Views
Anime Line [ aniline ]
O Animeline foi criado para animar no início da pagina, ou no header. São animações padrões q da vida ao seu projeto.
.aniline-{ tam } - Anima Fade;
.aniline-t-{ tam } - Anima ao Topo;
.aniline-d-{ tam } - Anima a direita;
.aniline-f-{ tam } - Anima no Final;
.aniline-e-{ tam } - Anima a esquerda;
.aniline-in-{ tam } - Anima dentro para fora;
.aniline-out-{ tam } - fora fora pra dentro;
.aniline-c-{ tam } - Anima pulsiona 1 vez;
.aniline-z-{ tam } - Anima rotação com impulso;
.aniline-r-{ tam } - Anima rotacional;
<div class="aniline">FADE</div>
<div class="aniline-gg">FADE</div>
<div class="aniline-t">TOPO</div>
<div class="aniline-d-m">DIREITA</div>
<div class="aniline-f-p">FIM</div>
<div class="aniline-e-g">ESQUERDA</div>
<div class="aniline-in">IN</div>
<div class="aniline-out">OUT</div>
<div class="aniline-c">PULSE</div>
<div class="aniline-z-gg">ZOOM</div>
<div class="aniline-r-g">ROTATE</div>
Anime Move [ move ]
A Animação si dá no hover do Object. (Esquerda, Topo, Direita, Final).
.move-t - Anima ao topo;
.move-e - Anima a esquerda;
.move-f - Anima para baixo;
.move-d - Anima para direita;
.move-in - Anima aumentando;
.move-out - Anima diminuindo;
.move-in-t - Anima aumentando para cima;
.move-in-e - Anima aumentando para esquerda;
.move-in-f - Anima aumentando para baixo;
.move-in-d - Anima aumentando para direita;
move-in-t move-in-e move-in-f move-in-d
<a class="btn btn-principal move-t">move-t</a>
<a class="btn btn-secundaria move-e">move-e</a>
<a class="btn btn-sucesso move-f">move-f</a>
<a class="btn btn-alerta move-d">move-d</a>
<a class="btn btn-principal move-in">move-in</a>
<a class="btn btn-secundaria move-out">move-out</a>
<a class="btn btn-principal move-in-t">move-in-t</a>
<a class="btn btn-secundaria move-in-e">move-in-e</a>
<a class="btn btn-sucesso move-in-f">move-in-f</a>
<a class="btn btn-alerta move-in-d">move-in-d</a>
Anime View [ anime ]
Anime View - acontece quando movimentamos o scroll ou subimos o conteudo do site.
.anime-{ tam } = animation view fade;
.anime-t-{ tam } = animation view top;
.anime-d-{ tam } = animation view right;
.anime-f-{ tam } = animation view buttom;
.anime-e-{ tam } = animation view Left;
.anime-in-{ tam } = animation view in;
.anime-out-{ tam } = animation view out;
.anime-rot-{ tam } = animation view rotate;
<div class="anime-e-g">Views Esquerda G</div>
<div class="anime-p">Views Fade P</div>
<div class="anime-d-m">Views Direita M</div>
<div class="anime-t-gg">Views Topo GG</div>
<div class="anime-in-g">Views In G</div>
<div class="anime-rot-m">Views Rot M</div>
<div class="anime-out-m">Views Out M</div>
<div class="anime-out-gg">Views Out GG</div>