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.
Last active
July 6, 2016 14:48
-
-
Save palewire/163cbbc777e90e4aaae5aae99f9d7c98 to your computer and use it in GitHub Desktop.
How to be like The New York Times and make a psuedo GIF with CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| border: no |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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("http://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("http://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("http://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("http://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment