2014-01-31
CSS animation test, using an SVG jellyfish.
A Pen by Oliver Pattison on CodePen.
Last active
August 29, 2015 13:56
-
-
Save opattison/9165597 to your computer and use it in GitHub Desktop.
A Pen by Oliver Pattison.
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
| <!-- SVG credit: CC BY-NC Michelle Sites http://phylopic.org/image/ef63437d-d6f4-4583-9d75-a8c9b19a203d --> | |
| <body> | |
| <img src="http://s3.amazonaws.com/codepen.oliverpattison/PhyloPic.ef63437d.Michelle-Site.Scyphozoa.svg"> | |
| </body> |
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: #a6d0d9; | |
| background: hsla(190, 40%, 75%, 1); | |
| -webkit-animation: blueshift 10s ease-in-out infinite forwards; | |
| animation: blueshift 10s ease-in-out infinite forwards; | |
| } | |
| @-webkit-keyframes blueshift { | |
| 0% { | |
| background-color: hsla(190, 40%, 50%, 1); | |
| } | |
| 50% { | |
| background-color: hsla(190, 40%, 75%, 1); | |
| } | |
| 100% { | |
| background-color: hsla(190, 40%, 50%, 1); | |
| } | |
| } | |
| img { | |
| display: block; | |
| margin: 0 auto; | |
| max-width: 100%; | |
| padding: 5em 1em; | |
| -webkit-animation: floating 15s ease infinite forwards; | |
| animation: floating 15s ease infinite forwards; | |
| } | |
| @-webkit-keyframes floating { | |
| 0% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 10% { | |
| -webkit-transform: translate(-.25em, 0); | |
| transform: translate(-.25em, 0); | |
| } | |
| 25% { | |
| -webkit-transform: translate(.75em, .5em); | |
| transform: translate(.75em, .5em); | |
| } | |
| 50% { | |
| -webkit-transform: translate(0, 1em); | |
| transform: translate(0, .75em); | |
| } | |
| 75% { | |
| -webkit-transform: translate(-1em, 0); | |
| transform: translate(-1em, 0); | |
| } | |
| 90% { | |
| -webkit-transform: translate(0, -.5em); | |
| transform: translate(0, -.5em); | |
| } | |
| 100% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| } | |
| @keyframes floating { | |
| 0% { | |
| transform: translate(0); | |
| } | |
| 10% { | |
| transform: translate(-.25em, 0); | |
| } | |
| 25% { | |
| transform: translate(.75em, .5em); | |
| } | |
| 50% { | |
| transform: translate(0, .75em); | |
| } | |
| 75% { | |
| transform: translate(-1em, 0); | |
| } | |
| 90% { | |
| transform: translate(0, -.5em); | |
| } | |
| 100% { | |
| transform: translate(0); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment