A screen size bird, changes colors depending on which screen size is viable in bootstrap.

bs-screensize-bird.css

.bird {
  position: absolute;
  right: 16px;
  width: 29px;
  height: 16px;
  border-radius: 100px 8px 100px 0;
  border: solid 1px #000;
  transform: rotate(37deg);
  transition: all 120ms ease-out;
}
.bird:hover {
  background-color: #000;
}
.bird:active {
  animation: super-rainbow 4s infinite alternate linear;
}
.bird:before {
  content: "●";
  position: relative;
  font-size: 0.75em;
  top: 0;
  left: 4px;
}
.bird:after {
  content: "ɺ";
  position: relative;
  top: 9px;
  left: 15px;
  color: black;
}
.animation-fadeInLeft {
  animation-name: fadeInLeft;
  animation-duration: 0.75s;
  animation-timing-function: ease-out;
  visibility: visible !important;
}
@keyframes fadeInLeft {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes super-rainbow {
  0% {
    background-color: red;
    color: violet;
  }
  20% {
    background-color: orange;
    color: red;
  }
  40% {
    background-color: yellow;
    color: orange;
  }
  60% {
    background-color: green;
    color: yellow;
  }
  80% {
    background-color: blue;
    color: green;
  }
  100% {
    background-color: violet;
    color: blue;
  }
}

bs-screensize-bird.js

//jQuery

function div(s,c) { return '<div class="bird animation-fadeInLeft visible-'+s+'-block bg-'+c+'"></div>'; }
$('body').append(
    div('xs','danger')+
    div('sm','warning')+
    div('md','primary')+
    div('lg','success')
);


/* Or just put this html where you want the bird(s)
<div class="bird animation-fadeInLeft visible-xs-block bg-danger"></div>
<div class="bird animation-fadeInLeft visible-sm-block bg-warning"></div>
<div class="bird animation-fadeInLeft visible-md-block bg-primary"></div>
<div class="bird animation-fadeInLeft visible-lg-block bg-success">
*/

bs-screensize-bird.less

// I used an autoprefixer to fill-in browser the other prefix

.bird {
  position: absolute;
  right: 16px;
  width:29px;
  height:16px;
  border-radius: 100px 8px 100px 0;
  border:solid 1px #000;
  transform: rotate(37deg);

  transition: all 120ms ease-out;
  &:hover { background-color:#000; }        
  &:active { animation: super-rainbow 4s infinite alternate linear; }

  //eye
  &:before{
      content: "●";
      position: relative;
      font-size: 0.75em;
      top: 0;
      left: 4px;
  }

  //leg
  &:after {
      content: "ɺ";
      position: relative;
      top:9px;
      left:15px;
      color:black;
  }
}

.animation-fadeInLeft {
  animation-name: fadeInLeft;
  animation-duration: 0.75s;
  animation-timing-function: ease-out;
  visibility: visible !important;
}
@keyframes fadeInLeft {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes super-rainbow {
  0%   { background-color: red;    color: violet; } 
  20%  { background-color: orange; color: red; }
  40%  { background-color: yellow; color: orange; }
  60%  { background-color: green;  color: yellow; }
  80%  { background-color: blue;   color: green; }
  100% { background-color: violet; color: blue; }
}