[[module CSS]]
.animated{
color:gay;
}

.animated:before {
  content: "original";
  animation: topToBottom 5s infinite;
  -webkit-animation: topToBottom 5s infinite;
  -moz-animation: topToBottom 5s infinite;
  -o-animation: topToBottom 5s infinite;
  -ms-animation: topToBottom 5s infinite;
}

@keyframes topToBottom {
  0% {
    content: "original";
  }
  50% {
    content: "transition";
  }
  100% {
    content: "final but more frames can be added";
  }
}
[[/module]]
[[span class="animated"]] [[/span]]

do this 2 the module if u want 2 change the font color size

.animated {
color: gay;
font-family: gay;
font-weight: normal|bold|bolder|lighter;
text-decoration: none|overline|line-through|underline;
}

the first frame of animation should be included in content. fuck around and find out the rest.

.animated:before {
  content: "original";
  animation: topToBottom 5s infinite;
  -webkit-animation: topToBottom 5s infinite;
  -moz-animation: topToBottom 5s infinite;
  -o-animation: topToBottom 5s infinite;
  -ms-animation: topToBottom 5s infinite;
}

add your frames in like this

@keyframes topToBottom {
  0% {
    content: "a frame";
  }
  50% {
    content: "another frame";
  }
  100% {
    content: "last frame";
  }

type whatever in between here. it will show up in EVERY frame. the frames are span styles, applied to a blank space "  " you can leave it blank like in the provided code and it'll work. do not remiove my friend "  " if you don't write anythig

[[span class="animated"]] wikidot is fail[[/span]]
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License