Просмотр поста

.w-top {
  -webkit-animation: w-move-t 1s forwards;
  animation: w-move-t 1s forwards;
}
.w-right {
  -webkit-animation: w-move-r 1s forwards;
  animation: w-move-r 1s forwards;
}
.w-left {
  -webkit-animation: w-move-l 1s forwards;
  animation: w-move-l 1s forwards;
}

@-webkit-keyframes w-move-t {
  from {top: -600px; opacity: 0; position: absolute; }
  to {top: 0;  opacity: 1; position: relative; display: inline-block; }
}
@keyframes w-move-t {
  from {top: -600px; opacity: 0; position: absolute;}
  to {top: 0;  opacity: 1; position: relative;  display: inline-block;}
}
@-webkit-keyframes w-move-r {
  from {right: -600px; opacity: 0; position: absolute; }
  to {right: 0;  opacity: 1; position: relative; display: inline-block; }
}
@keyframes w-move-r {
  from {right: -600px; opacity: 0; position: absolute;}
  to {right: 0;  opacity: 1; position: relative;  display: inline-block; }
}
@-webkit-keyframes w-move-l {
  from {left: -600px; opacity: 0; position: absolute; }
  to {left: 0;  opacity: 1; position: relative; display: inline-block;}
}
@keyframes w-move-l {
  from {left: -600px; opacity: 0; position: absolute;}
  to {left: 0;  opacity: 1; position: relative;  display: inline-block;}
}
.m-1 {  animation-delay: 0.5s;  }
.m-2 { animation-delay: 1s;  }
.m-3 { animation-delay: 1.5s;  }
.m-4 { animation-delay: 2s;  }
.m-5 { animation-delay: 2.5s;  }
.m-6 { animation-delay: 3s;  }
.m-7 { animation-delay: 3.5s;  }