Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- HTML:
- <body>
- <div class="box fade-in one">
- 1) look at me fade in
- </div>
- <div class="box fade-in two">
- 2) Oh hi! i can fade too!
- </div>
- <div class="box fade-in three">
- 3) Oh hi! i can fade three!
- </div>
- </body>
- CSS:
- /* make keyframes that tell the start state and the end state of our object */
- @-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
- @-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
- @keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
- .fade-in {
- opacity:0; /* make things invisible upon start */
- -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
- -moz-animation:fadeIn ease-in 1;
- animation:fadeIn ease-in 1;
- -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
- -moz-animation-fill-mode:forwards;
- animation-fill-mode:forwards;
- -webkit-animation-duration:1s;
- -moz-animation-duration:1s;
- animation-duration:1s;
- }
- .fade-in.one {
- -webkit-animation-delay: 0.7s;
- -moz-animation-delay: 0.7s;
- animation-delay: 0.7s;
- }
- .fade-in.two {
- -webkit-animation-delay: 1.2s;
- -moz-animation-delay:1.2s;
- animation-delay: 1.2s;
- }
- .fade-in.three {
- -webkit-animation-delay: 1.6s;
- -moz-animation-delay: 1.6s;
- animation-delay: 1.6s;
- }
- /*---make a basic box ---*/
- .box{
- width: 100px;
- height: 100px;
- position: relative;
- margin: 10px;
- color: white;
- padding: 40px;
- float: left;
- border: 1px solid #fff;
- background: #27a5d2;
- border-radius: 10px;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement