You are here

animations.css in Node pop-up 7

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
}

@keyframes down_fade {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes down_fade {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
  }
}

.npop-animate-fade-top {
  animation-name: down_fade;
  -webkit-animation-name: down_fade;
}

@keyframes left_fade {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes left_fade {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
  }
}

.npop-animate-fade-left {
  animation-name: left_fade;
  -webkit-animation-name: left_fade;
}

@keyframes right_fade {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


@-webkit-keyframes right_fade {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
  }
}

.npop-animate-fade-right {
  animation-name: right_fade;
  -webkit-animation-name: right_fade;
}

@keyframes up_fade {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


@-webkit-keyframes up_fade {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
  }
}

.npop-animate-fade-bottom {
  animation-name: up_fade;
  -webkit-animation-name: up_fade;
}

@keyframes right {
  from {
    transform: translate3d(100%, 0, 0);
  }

  to {
    transform: none;
  }
}

@-webkit-keyframes right {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
  }

  to {
    -webkit-transform: none;
  }
}

.npop-animate-right {
  animation-name: right;
  -webkit-animation-name: right;
}

@keyframes left {
  from {
    transform: translate3d(-100%, 0, 0);
  }

  to {
    transform: none;
  }
}


@-webkit-keyframes left {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
  }

  to {
    -webkit-transform: none;
  }
}

.npop-animate-left {
  animation-name: left;
  -webkit-animation-name: left;
}

@keyframes down {
  from {
    transform: translate3d(0, -100%, 0);
  }

  to {
    transform: none;
  }
}

@-webkit-keyframes down {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
  }

  to {
    -webkit-transform: none;
  }
}

.npop-animate-top {
  animation-name: down;
  -webkit-animation-name: down;
}

@keyframes up {
  from {
    transform: translate3d(0, 100%, 0);
  }

  to {
    transform: none;
  }
}


@-webkit-keyframes up {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
  }

  to {
    -webkit-transform: none;
  }
}

.npop-animate-bottom {
  animation-name: up;
  -webkit-animation-name: up;
}

File

css/animations.css
View source
  1. .animated {
  2. animation-duration: 1s;
  3. animation-fill-mode: both;
  4. -webkit-animation-duration: 1s;
  5. -webkit-animation-fill-mode: both;
  6. }
  7. @keyframes down_fade {
  8. from {
  9. opacity: 0;
  10. transform: translate3d(0, -100%, 0);
  11. }
  12. to {
  13. opacity: 1;
  14. transform: none;
  15. }
  16. }
  17. @-webkit-keyframes down_fade {
  18. from {
  19. opacity: 0;
  20. -webkit-transform: translate3d(0, -100%, 0);
  21. }
  22. to {
  23. opacity: 1;
  24. -webkit-transform: none;
  25. }
  26. }
  27. .npop-animate-fade-top {
  28. animation-name: down_fade;
  29. -webkit-animation-name: down_fade;
  30. }
  31. @keyframes left_fade {
  32. from {
  33. opacity: 0;
  34. transform: translate3d(-100%, 0, 0);
  35. }
  36. to {
  37. opacity: 1;
  38. transform: none;
  39. }
  40. }
  41. @-webkit-keyframes left_fade {
  42. from {
  43. opacity: 0;
  44. -webkit-transform: translate3d(-100%, 0, 0);
  45. }
  46. to {
  47. opacity: 1;
  48. -webkit-transform: none;
  49. }
  50. }
  51. .npop-animate-fade-left {
  52. animation-name: left_fade;
  53. -webkit-animation-name: left_fade;
  54. }
  55. @keyframes right_fade {
  56. from {
  57. opacity: 0;
  58. transform: translate3d(100%, 0, 0);
  59. }
  60. to {
  61. opacity: 1;
  62. transform: none;
  63. }
  64. }
  65. @-webkit-keyframes right_fade {
  66. from {
  67. opacity: 0;
  68. -webkit-transform: translate3d(100%, 0, 0);
  69. }
  70. to {
  71. opacity: 1;
  72. -webkit-transform: none;
  73. }
  74. }
  75. .npop-animate-fade-right {
  76. animation-name: right_fade;
  77. -webkit-animation-name: right_fade;
  78. }
  79. @keyframes up_fade {
  80. from {
  81. opacity: 0;
  82. transform: translate3d(0, 100%, 0);
  83. }
  84. to {
  85. opacity: 1;
  86. transform: none;
  87. }
  88. }
  89. @-webkit-keyframes up_fade {
  90. from {
  91. opacity: 0;
  92. -webkit-transform: translate3d(0, 100%, 0);
  93. }
  94. to {
  95. opacity: 1;
  96. -webkit-transform: none;
  97. }
  98. }
  99. .npop-animate-fade-bottom {
  100. animation-name: up_fade;
  101. -webkit-animation-name: up_fade;
  102. }
  103. @keyframes right {
  104. from {
  105. transform: translate3d(100%, 0, 0);
  106. }
  107. to {
  108. transform: none;
  109. }
  110. }
  111. @-webkit-keyframes right {
  112. from {
  113. -webkit-transform: translate3d(100%, 0, 0);
  114. }
  115. to {
  116. -webkit-transform: none;
  117. }
  118. }
  119. .npop-animate-right {
  120. animation-name: right;
  121. -webkit-animation-name: right;
  122. }
  123. @keyframes left {
  124. from {
  125. transform: translate3d(-100%, 0, 0);
  126. }
  127. to {
  128. transform: none;
  129. }
  130. }
  131. @-webkit-keyframes left {
  132. from {
  133. -webkit-transform: translate3d(-100%, 0, 0);
  134. }
  135. to {
  136. -webkit-transform: none;
  137. }
  138. }
  139. .npop-animate-left {
  140. animation-name: left;
  141. -webkit-animation-name: left;
  142. }
  143. @keyframes down {
  144. from {
  145. transform: translate3d(0, -100%, 0);
  146. }
  147. to {
  148. transform: none;
  149. }
  150. }
  151. @-webkit-keyframes down {
  152. from {
  153. -webkit-transform: translate3d(0, -100%, 0);
  154. }
  155. to {
  156. -webkit-transform: none;
  157. }
  158. }
  159. .npop-animate-top {
  160. animation-name: down;
  161. -webkit-animation-name: down;
  162. }
  163. @keyframes up {
  164. from {
  165. transform: translate3d(0, 100%, 0);
  166. }
  167. to {
  168. transform: none;
  169. }
  170. }
  171. @-webkit-keyframes up {
  172. from {
  173. -webkit-transform: translate3d(0, 100%, 0);
  174. }
  175. to {
  176. -webkit-transform: none;
  177. }
  178. }
  179. .npop-animate-bottom {
  180. animation-name: up;
  181. -webkit-animation-name: up;
  182. }