block by palewire 163cbbc777e90e4aaae5aae99f9d7c98

How to be like The New York Times and make a psuedo GIF with CSS

Full Screen

A demonstration of how to create a GIF-like animation using only CSS, drawn from The New York Times story “Refugees Encounter a Foreign Word: Welcome”. Photos from the Los Angeles Times have been substituted.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
    <head>
        <style type="text/css">
        @-webkit-keyframes fadeOut {
          25% {
            opacity: 1;
          }
          50% {
            opacity: 0;
          }
        }
        @keyframes fadeOut {
          25% {
            opacity: 1;
          }
          50% {
            opacity: 0;
            }
        }
        ul {
            list-style: none;
            padding-left: 0;
        }
        .gif-container {
           position: absolute;
           top: 0;
           right: 0;
           left: 0;
           width: 100%;
           bottom: 0;
           display: -webkit-box;
           display: -ms-flexbox;
           display: flex;
           -webkit-box-pack: center;
               -ms-flex-pack: center;
                   justify-content: center;
           -webkit-box-align: center;
               -ms-flex-align: center;
                   align-items: center;
        }
         .gif-container .inner {
           width: 70vh;
           height: 70vh;
           max-width: 45vw;
           max-height: 45vw;
           display: block;
           margin-left: auto;
           margin-right: auto;
        }
         .gif-container .inner li {
           width: 70vh;
           height: 70vh;
           max-width: 45vw;
           max-height: 45vw;
           background-repeat: no-repeat;
           background-size: cover;
           background-position: center center;
           position: absolute;
           opacity: 0;
           -webkit-animation: fadeOut 8s infinite both;
                   animation: fadeOut 8s infinite both;
           background-image: url("//www.trbimg.com/img-5662048d/turbine/la-me-year-in-focus-2015-pictures-20151201-156/750/750x750");
        }
        .gif-container .inner li:nth-child(2) {
           -webkit-animation-delay: 2s;
                   animation-delay: 2s;
           background-image: url("//www.trbimg.com/img-5661f792/turbine/la-me-year-in-focus-2015-pictures-20151201-099/750/750x750");
        }
         .gif-container .inner li:nth-child(3) {
           -webkit-animation-delay: 4s;
                   animation-delay: 4s;
           background-image: url("//www.trbimg.com/img-5661f779/turbine/la-me-year-in-focus-2015-pictures-20151201-091/750/750x750");
        }
         .gif-container .inner li:nth-child(4) {
           -webkit-animation-delay: 6s;
                   animation-delay: 6s;
           background-image: url("//www.trbimg.com/img-56620f3d/turbine/la-me-year-in-focus-2015-pictures-20151201-167/750/750x750");
        }
       .gif-container figure {
           width: 34rem;
           display: block;
           margin-left: 5rem;
           margin-right: auto;
        }
        .gif-container span {
           position: absolute;
           top: 5rem;
           left: 0;
        }
        </style>
    </head>
    <body>
        <div id="graphic">
            <div class="gif-container">
                <ul class="inner">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </body>
</html>