Deslizar da animação CSS esquerda
Eu gostaria de fazer uma animação simples, quando a página carrega, meu logotipo deve animar do lado esquerdo da caixa para o lado direito. Tentei muitas versões, mas ainda não consegui.
HTML
<body>
<div>
<img src="logo.png" alt="logo" style="width:170px;height:120px;">
</div>
</body>
CSS
div
{
width:640px;
height:175px;
background:blue;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
position:absolute;
}
div img
{
-webkit-transform: translate(3em,0);
-moz-transform: translate(3em,0);
-o-transform: translate(3em,0);
-ms-transform: translate(3em,0);
}
4
Author: Manoj Kumar, 2015-12-08
2 answers
Tenta usar os nomes das teclas.
div {
width: 50px;
height: 40px;
background: blue;
position: relative;
left: 500px;
-webkit-animation: slideIn 2s forwards;
-moz-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
}
@-webkit-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
@-moz-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
@keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
<div></div>
13
Author: Aaron, 2015-12-08 15:27:45
Tem de usar animação em vez de transição. Efeitos de transição são despoletados em certos eventos, por exemplo um clique que adiciona uma classe ou um hover.
div img {
animation: example 1s ease-in-out forwards;
}
@keyframes example {
from {transform: transition(0,0)}
to {transform: transition(3em,0)}
}
Agora você teria que adicionar os prefixos para isso, webkit, moz, etc.
Para o conhecimento básico sobre a animação da estrutura de chaves em css3: http://www.w3schools.com/css/css3_animations.asp
0
Author: Frederik Witte, 2015-12-08 15:22:42