Created
June 12, 2017 21:37
-
-
Save gregnb/a81d07c1900295df6af91b694d742419 to your computer and use it in GitHub Desktop.
CSS stagger fade up animation
This file contains hidden or 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> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>CSS Staggered fade up effect</title> | |
| </head> | |
| <script type="application/javascript"> | |
| </script> | |
| <style> | |
| body { | |
| background-color: #EEF3F5; | |
| margin: 0; | |
| padding: 0; | |
| font-family: Helvitca; | |
| } | |
| .wrapper { | |
| margin: 100px auto 0; | |
| max-width: 1024px; | |
| width: 100%; | |
| } | |
| .tile-wrapper { | |
| display: block; | |
| margin: 0 auto; | |
| padding: 30px; | |
| width: 600px; | |
| } | |
| .tile { | |
| display: block; | |
| } | |
| .tile h1 { | |
| font-size: 18px; | |
| font-family: Helvetica; | |
| text-align: center; | |
| } | |
| .tile img { | |
| width: 150px; | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| /* questions */ | |
| #questions { | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| background-color: #FFF; | |
| } | |
| .questions { | |
| background-color: #fff; | |
| border-radius: 5px; | |
| color: #000; | |
| display: block; | |
| margin-bottom: 5px; | |
| padding-bottom: 15px; | |
| padding-top: 15px; | |
| position: relative; | |
| text-decoration: none; | |
| width: 100%; | |
| transition: all 0.1s linear 0s; | |
| border: solid 2px #fff; | |
| } | |
| .questions .questions-text { | |
| display: block; | |
| font-size: 20px; | |
| padding-left: 15px; | |
| } | |
| .questions .questions-radio { | |
| background-color: #a5a5a5; | |
| border-radius: 50%; | |
| display: block; | |
| height: 25px; | |
| position: absolute; | |
| right: 25px; | |
| top: 12px; | |
| width: 25px; | |
| transform: scale(0.5); | |
| transition: all 0.3s ease 0s; | |
| } | |
| .questions:hover { | |
| border: 2px solid #394af2; | |
| } | |
| .questions:hover .questions-radio { | |
| background-color: #394AF2; | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| /* animation. could be done in SASS with iteration */ | |
| .tile.animated { | |
| animation-name: fadeInDown; | |
| animation-duration: 1s; | |
| animation-fill-mode: backwards; | |
| } | |
| .tile.animated:nth-child(2) { | |
| animation-delay: .3s; | |
| } | |
| .tile.animated:nth-child(3) { | |
| animation-delay: .6s; | |
| } | |
| .tile.animated:nth-child(4) { | |
| animation-delay: .9s; | |
| } | |
| .tile.animated:nth-child(5) { | |
| animation-delay: 1.2s; | |
| } | |
| @keyframes fadeInDown { | |
| from { | |
| opacity: 0; | |
| transform: translateY(50px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translate(0px); | |
| } | |
| } | |
| </style> | |
| <body> | |
| <div class="wrapper"> | |
| <div class="tile-wrapper"> | |
| <div class="tile animated"> | |
| <img src="some-image.png" border="0" /> | |
| </div> | |
| <div class="tile animated"> | |
| <h1>some header</h1> | |
| </div> | |
| <div class="tile animated"> | |
| <a href="#" class="questions"> | |
| <span class="questions-text"> | |
| Random question for the first slot | |
| </span> | |
| <span class="questions-radio"> | |
| </span> | |
| </a> | |
| </div> | |
| <div class="tile animated"> | |
| <a href="#" class="questions"> | |
| <span class="questions-text"> | |
| Random question for the second slot | |
| </span> | |
| <span class="questions-radio"> | |
| </span> | |
| </a> | |
| </div> | |
| <div class="tile animated"> | |
| <a href="#" class="questions"> | |
| <span class="questions-text"> | |
| Random question for the third slot | |
| </span> | |
| <span class="questions-radio"> | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment