no lugar de usar margin, você pode usar position...
para a animação, use animation.
.container {
position: relative;
width: 100%;
height: 170px;
overflow: hidden;
}
.box {
position: absolute;
width: 150px;
height: 150px;
top: 0px;
margin: 10px;
left: 100%;
border-radius: 5px;
background-color: whitesmoke;
box-shadow: 0px 0px 5px black;
}
.boxA {
animation: boxA 1s linear 0s forwards;
-webkit-animation: boxA 1s linear 0s forwards;
}
.boxB {
animation: boxB 1s linear 1s forwards;
-webkit-animation: boxB 1s linear 1s forwards;
}
.boxC {
animation: boxC 1s linear 2s forwards;
-webkit-animation: boxC 1s linear 2s forwards;
}
@keyframes boxA {
0% {
left: 100%;
background-color: teal;
}
100% {
left: 0px;
background-color: crimson;
}
}
@keyframes boxB {
0% {
left: 100%;
background-color: steelblue;
}
100% {
left: 170px;
background-color: teal;
}
}
@keyframes boxC {
0% {
left: 100%;
background-color: crimson;
}
100% {
left: 340px;
background-color: steelblue;
}
}
@-webkit-keyframes boxA {
0% {
left: 100%;
background-color: white;
}
100% {
left: 0px;
background-color: crimson;
}
}
@-webkit-keyframes boxB {
0% {
left: 100%;
background-color: white;
}
100% {
left: 170px;
background-color: teal;
}
}
@-webkit-keyframes boxC {
0% {
left: 100%;
background-color: white;
}
100% {
left: 340px;
background-color: steelblue;
}
}
<div class="container">
<div class="box boxA">A</div>
<div class="box boxB">B</div>
<div class="box boxC">C</div>
</div>
A propriedade animation
nada mais é que uma forma curta para as propriedades animation-name
, animation-duration
, animation-timing-function
, animation-delay
, animation-iteration-count
, animation-direction
, animation-fill-mode
e animation-play-state
... então ao fazer:
animation: boxC 1s linear forwards;
é o mesmo de fazer o seguinte:
animation-name: boxC;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: forwards;
ou seja, execute a animação boxC
, esta deve ter uma duração de 1s
, onde cada fração da animação deve ocupar a mesma fatia de tempo (linear
), e após o termino da animação, o elemento DOM não deve sofrer um reset no estilo (forwards
).
o @keyframes
define as regras para a animação, por exemplo:
.box {
width: 300px;
height: 300px;
animation: background 4s linear forwards;
-webkit-animation: background 4s linear forwards;
}
@-webkit-keyframes background {
0% { background-color: red; }
75% { background-color: green; }
100% { background-color: blue; }
}
@keyframes background {
0% { background-color: red; }
75% { background-color: green; }
100% { background-color: blue; }
}
<div class="box">
</div>
background
é o nome da animação, 0%
, 75%
e 100%
informam qual o css esperado naquele momento.
No exemplo acima, a div.box
vai iniciar com background-color: red;
, durante 3s (75% de 4s) ela irá mudar gradativamente até ficar com background-color: green;
, por fim, ela irá novamente mudar gradativamente por 1s (25% de 4s) até ficar com background-color: blue;