plumes/public/messages/pl-messages-message.css

Flying-fast Metro future vision components

.pl-message {
  position: relative;
}
.pl-message .word {
  display: inline-block;
  margin-left: 1.5rem;
  position: relative;
  -webkit-transform: translateY(1rem);
  -moz-transform: translateY(1rem);
  -ms-transform: translateY(1rem);
  -o-transform: translateY(1rem);
  transform: translateY(1rem);
  opacity: 0;
}
.pl-message .word:first-child {
  margin-left: 0;
}
.pl-message .word.display {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  -ms-transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.pl-message .word.out {
  opacity: 0;
  -webkit-transform: translateY(-1rem);
  -moz-transform: translateY(-1rem);
  -ms-transform: translateY(-1rem);
  -o-transform: translateY(-1rem);
  transform: translateY(-1rem);
  -webkit-transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  -ms-transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.pl-message .word strong {
  font-weight: 300;
}