Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @-webkit-keyframes slideRight{
- from{-webkit-transform:translateX(-20px)}
- to{-webkit-transform:translateX(0)}
- }
- @-moz-keyframes slideRight{
- from{-moz-transform:translateX(-20px)}
- to{-moz-transform:translateX(0)}
- }
- @-o-keyframes slideRight{
- from{-o-transform:translateX(-20px)}
- to{-o-transform:translateX(0)}
- }
- @keyframes slideRight{
- from{transform:translateX(-20px)}
- to{transform:translateX(0)}
- }
- @-webkit-keyframes slideLeft{
- from{-webkit-transform:translateX(20px)}
- to{-webkit-transform:translateX(0)}
- }
- @-moz-keyframes slideLeft{
- from{-moz-transform:translateX(20px)}
- to{-moz-transform:translateX(0)}
- }
- @-o-keyframes slideLeft{
- from{-o-transform:translateX(20px)}
- to{-o-transform:translateX(0)}
- }
- @keyframes slideLeft{
- from{transform:translateX(20px)}
- to{transform:translateX(0)}
- }
- @-webkit-keyframes fadeIn{
- from{opacity:0}to{opacity:1}
- }
- @-moz-keyframes fadeIn{
- from{opacity:0}to{opacity:1}
- }
- @-o-keyframes fadeIn{
- from{opacity:0}to{opacity:1}
- }
- @keyframes fadeIn{
- from{opacity:0}to{opacity:1}
- }
- #left{
- display: inline-block;
- -webkit-animation: slideRight 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
- -moz-animation: slideRight 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
- -o-animzation: slideRight 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
- animation: slideRight 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
- -webkit-animation-fill-mode: backwards;
- -moz-animation-fill-mode: both;
- -o-animation-fill-mode: both;
- animation-fill-mode: both;
- }
- #right{
- display: inline-block;
- -webkit-animation: slideLeft 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
- -moz-animation: slideLeft 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
- -o-animzation: slideLeft 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
- animation: slideLeft 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
- -webkit-animation-fill-mode: both;
- -moz-animation-fill-mode: both;
- -o-animation-fill-mode: both;
- animation-fill-mode: both;
- }
- <div id="left">
- /* some content */
- </div>
- <div id="right">
- /* some content */
- <div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement