Last active
December 16, 2015 13:08
-
-
Save erickeno/5439565 to your computer and use it in GitHub Desktop.
creating animation with CSS3.
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 lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="css/main.css"> | |
| <link rel="stylesheet" href="css/page.css"> | |
| <title>CSS3</title> | |
| </head> | |
| <body> | |
| <div id="wrapper"> | |
| <div id="myDiv1" class="mydiv"> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ipsum velit. Sed vestibulum quam tellus, sed feugiat est. Ut cursus tempor elementum. Morbi tempus luctus consectetur. Ut iaculis vulputate mauris, eu rutrum est pretium et. Vestibulum convallis, felis eu cursus elementum, dui dolor molestie diam, ac faucibus turpis magna et eros. Curabitur venenatis turpis eu neque pellentesque vitae consequat erat congue. Proin mattis sodales risus, ac tempus sapien sodales vitae. Pellentesque in leo erat. Nulla sagittis aliquam urna rutrum laoreet. | |
| </p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
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
| body { | |
| background: #EEE; | |
| /*small code to bootstrap the page*/ | |
| font-family: arial, helvetica, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #wrapper { | |
| width: 960px; | |
| margin: 0 auto; | |
| } | |
| .mydiv { | |
| position: absolute; | |
| top: 50px; | |
| left: 350px; | |
| width: 400px; | |
| height: 400px; | |
| background-color: #ff9900; | |
| } | |
| .mydiv p { | |
| padding: 25px; | |
| line-height: 1.5em; | |
| } |
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
| /* using the webkit-keyframes to create animation on the page*/ | |
| @-webkit-keyframes bounce { | |
| 0% { | |
| -webkit-transform:scale(1.0) rotate(0deg); | |
| -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.7); | |
| } | |
| 70% { | |
| -webkit-transform: scale(1.2) rotate(10deg); | |
| -webkit-box-shadow: 20px 20px 80px rgba(0,0,0,0.2) | |
| } | |
| 100% { | |
| -webkit-transform: scale(1.2) rotate(-5deg); | |
| -webkit-box-shadow: 20px 20px 80px rgba(0,0,0,0.2) | |
| } | |
| } | |
| #myDiv1 { | |
| -webkit-animation:bounce 1s infinite alternate ease-in-out; | |
| /*-webkit-animation-name:bounce; | |
| -webkit-animation-duration:2s; | |
| -webkit-animation-iteration-count: infinite; | |
| -webkit-animation-direction: alternate; | |
| -webkit-animation-timing-function:ease-in-out; | |
| */ | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
use the -webkit to prevent cross-browser problems