Last active
November 7, 2016 04:55
-
-
Save jnf/f3e6f9dff376b7ce6df4cea73f5dc081 to your computer and use it in GitHub Desktop.
CSS Animation Example
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
| @import url(https://fonts.googleapis.com/css?family=VT323); | |
| html { font: normal normal 16px/1.2 VT323, courier, monospace; } | |
| * { margin: 0; padding: 0; } | |
| body { | |
| background-color: #000; | |
| color: rgb(253, 254, 0); | |
| padding: 10vh; | |
| } | |
| h1 { | |
| font-size: 3rem; | |
| text-align: center; | |
| } | |
| div { | |
| cursor: pointer; | |
| transition: all 1s ease; | |
| } | |
| .e1 { | |
| background: rgba(0, 253, 254, 1); | |
| border-radius: 0; | |
| margin: 5vh auto; | |
| height: 10vh; | |
| width: 10vh; | |
| } | |
| .pink { background: rgba(253, 0, 254, 1); } | |
| .round { border-radius: 50%; } | |
| .big { height: 20vh; width: 20vh; } | |
| .spin { transform: rotate(360deg); } | |
| .spin3d { transform: rotate3d(1,1,1, 360deg); } | |
| /* uncomment the rule on line 40 to use the keyframe animation */ | |
| .e1:hover { | |
| /* animation: 0.75s ease 0s infinite pulse; */ | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 rgb(253, 254, 0); } | |
| 50% { box-shadow: 0 0 3rem rgb(253, 254, 0); } | |
| 100% { box-shadow: 0 0 0 rgb(253, 254, 0); } | |
| } | |
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> | |
| <title>Move the thing!</title> | |
| <meta charset="utf-8"> | |
| <link href="example.css" media="screen" rel="stylesheet" type="text/css"> | |
| </head> | |
| <body id="example"> | |
| <h1>CSS Transitions & Transforms Example</h1> | |
| <div class="e1"></div> | |
| </body> | |
| <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> | |
| <script src="example.js"></script> | |
| </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
| $(document).ready(function () { | |
| $('.e1').on('click', function (event) { | |
| event.preventDefault() | |
| // enable only one of these lines at a time | |
| // each additional class introduces another kind of transition | |
| // $(this).toggleClass('pink') | |
| // $(this).toggleClass('pink round') | |
| // $(this).toggleClass('pink round big') | |
| // $(this).toggleClass('pink round big spin3d') | |
| }) | |
| }) |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
https://developer.mozilla.org/en-US/docs/Web/CSS/animation