6 exemplos de animação com css
Compartilhar
Se você gosta de nossos conteúdos então não deixe de compartilhar com seus contatos, assim você nos ajuda a alcançar mais pessoas, você também pode realizar uma pesquena doação, assim você ajudará a desenvolver mais conteúdos e tutoriais de qualidade!
Confira nossas super ofertas:
► Games com desconto
► Computadores e Informática
► Eletrônicos
► Computadores, Componentes e Acessórios
► Smartfones
Postado em: 11/04/2020 15:45:44
► Computadores e Informática
► Eletrônicos
► Computadores, Componentes e Acessórios
► Smartfones
Fala dev!! Nessa dica de hoje irei mostrar 6 animações utilizando css puro, espero que gostem.
SCALE UP
<div class="scale-up">
<h2>Scale UP</h2>
</div>
.scale-up {
animation: scale-up 2s ease-out both infinite;
background-color: aqua;
width: 200px;
height: 200px;
display: flex;;
justify-content: center;
align-items: center;
}
@keyframes scale-up {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}
SCALE DOWN
<div class="scale-down">
<h2>Scale DOWN</h2>
</div>
.scale-down {
animation: scale-down 2s ease-out both infinite;
background-color: aqua;
width: 200px;
height: 200px;
display: flex;;
justify-content: center;
align-items: center;
}
@keyframes scale-down {
0% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
ROATE
<div class="rotate">
<h2>ROTATE</h2>
</div>
.rotate {
animation: rotate 2s ease-out both infinite;
background-color: aqua;
width: 200px;
height: 200px;
display: flex;;
justify-content: center;
align-items: center;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
ROTATE SCALE UP
<div class="rotate-scale-up">
<h2>Rotate Scale UP</h2>
</div>
.rotate-scale-up {
animation: rotate-scale-up 2s ease-out both infinite;
background-color: aqua;
width: 200px;
height: 200px;
display: flex;;
justify-content: center;
align-items: center;
}
@keyframes rotate-scale-up {
0% {
transform: scale(1) rotate(0);
}
50% {
transform: scale(2) rotate(180deg);
}
100% {
transform: scale(1) rotate(360deg);
}
}
FLIP
<div class="flip">
<h2>FLIP</h2>
</div>
.flip {
animation: flip 2s ease-out both infinite;
background-color: aqua;
width: 200px;
height: 200px;
display: flex;;
justify-content: center;
align-items: center;
}
@keyframes flip {
0% {
transform: rotateX(0);
}
100% {
transform: rotateX(-180deg);
}
}
SWING
<div class="_swing">
<h2>SWING</h2>
</div>
._swing {
animation: swing 2s ease-out both infinite;
background-color: aqua;
width: 200px;
height: 200px;
display: flex;;
justify-content: center;
align-items: center;
}
@keyframes swing {
0% {
transform: rotateX(0);
transform-origin: top;
}
100% {
transform: rotateX(180deg);
transform-origin: top;
}
}