A Pen by Joe Watkins.

index.html

<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
     
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">Ken Burns Header w/CSS Animations</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
          <ul class="nav navbar-nav">
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
        

    </nav>


<header id="top">
  <img src="https://dl.dropboxusercontent.com/u/35191529/1.jpg">
</header>

	<div class="container">
    <h1>Ken Burns Effect with CSS Animations</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, amet, illo, ut, provident voluptas nobis earum harum molestias nisi eveniet facere itaque nesciunt adipisci cumque officiis saepe odio quos iste laudantium ad fuga error suscipit sequi veritatis dolorem. Assumenda, harum debitis voluptates sit nostrum impedit totam quidem corporis repellat similique ab autem sequi nisi inventore temporibus quia dolore aut officiis praesentium porro possimus explicabo laboriosam dolor laudantium sunt exercitationem minus aperiam ratione consequatur tempora dolorem dolorum illum ipsum? Dicta dolores repudiandae labore non distinctio qui facere quod accusantium. Blanditiis, beatae, corrupti, velit, doloremque voluptas est vero quod mollitia cum aliquid libero magni atque non nesciunt fuga consectetur cumque saepe numquam reprehenderit perspiciatis quas officiis ea facilis assumenda asperiores dolor nihil obcaecati ipsum adipisci sapiente. Illo, commodi, deserunt in quis explicabo cupiditate eveniet animi illum quas ducimus ipsum iusto maxime cum amet eius dolore consequatur consequuntur id magni necessitatibus sit ipsa nisi enim aspernatur soluta voluptatem quam ea libero porro et facere repudiandae facilis quae. Soluta, vel veritatis tempora optio exercitationem veniam voluptates dignissimos dolore eveniet et aperiam id delectus iure. Quam, consequatur, nam expedita optio nisi pariatur exercitationem amet praesentium distinctio officia recusandae illo officiis porro itaque natus dolores ullam voluptates animi adipisci sint consectetur tempora voluptate iste minima facilis numquam aspernatur nemo saepe fuga sunt ad maxime nesciunt aliquid omnis doloremque obcaecati eos! Dignissimos, vel et incidunt natus ab modi reprehenderit eveniet nesciunt corporis fugiat voluptates temporibus vero culpa numquam neque ut voluptatem iure! Voluptatibus, soluta, aspernatur itaque qui doloribus architecto cumque enim placeat nulla sed assumenda magni accusantium numquam vero modi ullam praesentium possimus mollitia saepe magnam! Voluptatum, et, perspiciatis incidunt architecto nihil cupiditate ipsum temporibus velit officia minima saepe nisi impedit dicta blanditiis illum dolore laboriosam id dolor. Pariatur, sapiente, possimus numquam enim dignissimos aperiam debitis cum!</p>
	</div>

Ken-Burns-Effect-w-CSS-Animations.markdown

Ken Burns Effect w/CSS Animations

A Single header image with Ken Burns effect using CSS animations.

A Pen by Joe Watkins on CodePen.

License.

style.css

header[id='top'] {
	height: 500px;
	overflow: hidden;
	position: relative;
	text-align: center;
}

header[id='top'] img {
   min-width:100%;
  
	-moz-animation-duration: 275s;
	-webkit-animation-duration: 275s;
  
  -webkit-animation-name: slidein;
	-moz-animation-name: slidein;
	-ms-animation-name: slidein;
	-o-animation-name: slidein;
	animation-name: slidein;

	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
}

@keyframes "slidein" {
 25% {
    -webkit-transform: scale(1.6) translate3d(-400px, 0px, 0px);
   	-moz-transform: scale(1.6) translate3d(-400px, 0px, 0px);
   	-o-transform: scale(1.6) translate3d(-400px, 0px, 0px);
   	-ms-transform: scale(1.6) translate3d(-400px, 0px, 0px);
   	transform: scale(1.6) translate3d(-400px, 0px, 0px);
 }
 50% {
    -webkit-transform: scale(1) translate3d(0px, 0px, 0px);
   	-moz-transform: scale(1) translate3d(0px, 0px, 0px);
   	-o-transform: scale(1) translate3d(0px, 0px, 0px);
   	-ms-transform: scale(1) translate3d(0px, 0px, 0px);
   	transform: scale(1) translate3d(0px, 0px, 0px);
 }
 75% {
    -webkit-transform: scale(1.6) translate3d(+400px, 0px, 0px);
   	-moz-transform: scale(1.6) translate3d(+400px, 0px, 0px);
   	-o-transform: scale(1.6) translate3d(+400px, 0px, 0px);
   	-ms-transform: scale(1.6) translate3d(+400px, 0px, 0px);
   	transform: scale(1.6) translate3d(+400px, 0px, 0px);
 }

}

@-moz-keyframes slidein {
 25% {
   -moz-transform: scale(1.6) translate3d(-400px, 0px, 0px);
   transform: scale(1.6) translate3d(-400px, 0px, 0px);
 }
 50% {
   -moz-transform: scale(1) translate3d(0px, 0px, 0px);
   transform: scale(1) translate3d(0px, 0px, 0px);
 }
 75% {
   -moz-transform: scale(1.6) translate3d(+400px, 0px, 0px);
   transform: scale(1.6) translate3d(+400px, 0px, 0px);
 }

}

@-webkit-keyframes "slidein" {
 25% {
   -webkit-transform: scale(1.6) translate3d(-400px, 0px, 0px);
   transform: scale(1.6) translate3d(-400px, 0px, 0px);
 }
 50% {
   -webkit-transform: scale(1) translate3d(0px, 0px, 0px);
   transform: scale(1) translate3d(0px, 0px, 0px);
 }
 75% {
   -webkit-transform: scale(1.6) translate3d(+400px, 0px, 0px);
   transform: scale(1.6) translate3d(+400px, 0px, 0px);
 }

}

@-ms-keyframes "slidein" {
 25% {
   -ms-transform: scale(1.6) translate3d(-400px, 0px, 0px);
   transform: scale(1.6) translate3d(-400px, 0px, 0px);
 }
 50% {
   -ms-transform: scale(1) translate3d(0px, 0px, 0px);
   transform: scale(1) translate3d(0px, 0px, 0px);
 }
 75% {
   -ms-transform: scale(1.6) translate3d(+400px, 0px, 0px);
   transform: scale(1.6) translate3d(+400px, 0px, 0px);
 }

}

@-o-keyframes "slidein" {
 25% {
   -o-transform: scale(1.6) translate3d(-400px, 0px, 0px);
   transform: scale(1.6) translate3d(-400px, 0px, 0px);
 }
 50% {
   -o-transform: scale(1) translate3d(0px, 0px, 0px);
   transform: scale(1) translate3d(0px, 0px, 0px);
 }
 75% {
   -o-transform: scale(1.6) translate3d(+400px, 0px, 0px);
   transform: scale(1.6) translate3d(+400px, 0px, 0px);
 }

}