A Pen by Jared Phillips.

Bird-Animation.markdown

Bird Animation

Small animation of two birds coming together at the logo and then one sings.

A Pen by Jared Phillips on CodePen.

License.

index.haml

%header
  .main-callout
    %ul
      %li
        %h3.top Portland & Adelaide
        %p.middle 504 Adelaide Street West
        %p.middle	Toronto, ON M5V 1T5
        %p.bottom (416) 777-2343
      %li
        %img.left-bird{ src: "http://jaredphillips.io/sadiesdiner/images/left-bird.png" }
        %img.logo{ src: "http://jaredphillips.io/sadiesdiner/images/logo.png" }
        %img.music-note{ src: "http://jaredphillips.io/sadiesdiner/images/music-note.png" }
        %img.right-bird{ src: "http://jaredphillips.io/sadiesdiner/images/right-bird.png" }
      %li
        %h3.top Our Hours
        %p.middle Monday-Friday: 7:30am-10pm
        %p.middle Weekends: 9am-10pm
        %p.bottom
          %a.email{ href: "mailto:[email protected]" } ~ [email protected] ~

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Lato);
@import url(http://fonts.googleapis.com/css?family=Grand+Hotel);

@-webkit-keyframes bird-from-left {
  0%   { top:  -51px; left: -749px; }
  10%  { top:  -74px; left: -673px; }
  20%  { top: -105px; left: -611px; }
  30%  { top: -126px; left: -543px; }
  40%  { top: -136px; left: -471px; }
  50%  { top:  -98px; left: -405px; }
  60%  { top: -109px; left: -333px; }  
  70%  { top: -125px; left: -243px; }
  80%  { top: -140px; left: -170px; }
  100% { top: -140px; left: -170px; }

}

@-webkit-keyframes bird-from-right {
  0%   { top: -568px; left: 611px;  }
  10%  { top: -477px; left: 611px;  }
  20%  { top: -436px; left: 561px;  }
  30%  { top: -398px; left: 517px;  }
  40%  { top: -354px; left: 451px;  }
  50%  { top: -391px; left: 396px;  }
  60%  { top: -425px; left: 339px;  }
  70%  { top: -360px; left: 283px;  }
  80%  { top: -401px; left: 211px;  }
  90%  { top: -368px; left: 163px;  }
  100% { top: -347px; left: 135px;  }

}

@-webkit-keyframes musical-note {
  0%   { opacity: 0 }
  20%  { opacity: 1 }
  40%  { opacity: 0 }
  60%  { opacity: 1 }
  80%  { opacity: 0 }
  100% { opacity: 1 }
}


body {
  margin-top: 150px;
  background: url(http://subtlepatterns.com/patterns/white_wall.png);
}

.main-callout {
	width: 90%;
	margin: 0 auto;
	ul {
		list-style-type: none;
		li {
			height: 188px;
			float: left;
			width: 28%;
			text-align: center;
			margin: 0 2% 0 2%;
			h3 {
				font-size: 36px;
				letter-spacing: 1.9px;
				font-family: 'Grand Hotel', 'cursive';
				color: #d4320b;
				text-shadow: 3px 2px 6px rgba(138, 150, 150, 1);
			}
			p {
				font-family: 'Lato', 'sans-serif';
				line-height: 1.555;
				font-size: 18px;
				font-weight: 300;
        .email {
          text-decoration: none;
          font-family: 'Lato', 'sans-serif';
          color: #d4320b;
          }
			}
		}
	}
}

.top {
	padding-bottom: 5px;
	border-bottom: 2px solid #9BD8EB;
	display: block;
	margin: 5px;
}

.middle {
	display: block;
	margin: -1px;
}	

.bottom {
	display: block;
	margin: 5px;
	padding-top: 5px;
	border-top: 2px solid #9BD8EB;
}

.left-bird {
	position: relative;
	top: -140px;
	left: -170px;
	-webkit-animation: bird-from-left 3s linear;
}

.logo {
	position: relative;
	top: -210px;
	left: 0;
	height: 190px;
	width: 280px;
	max-width: 100%;
}

.music-note {
	position: relative;
	top: -260px;
	left: -80px;
	height: 37px;
	opacity: 0;
	-webkit-animation: musical-note 5s;
	animation-delay:3.4s;
	-webkit-animation-delay:3.4s;
}

.right-bird {
	position: relative;
	top: -347px;
	left: 135px;
	-webkit-animation: bird-from-right 3.4s linear;
}