This is a fork of Miloš Rujević's wonderful codebit. I've changed the font to Montserrat and added CSS3 browser prefixes so the animation works right out of the box across browsers.
Should work with Firefox, Chrome, Safari, Opera
Created
October 29, 2017 00:04
-
-
Save jameswquinn/5d96a72dd004cfcd3a3cc767ae4badeb to your computer and use it in GitHub Desktop.
Vertically rotating text css [FORK] w/ browser prefixes
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
| <head> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body> | |
| <div class="Iam"> | |
| <p>This is</p> | |
| <b> | |
| <div class="innerIam"> | |
| leggera<br /> | |
| a theme in progress<br /> | |
| built on bootstrap<br /> | |
| how I learn stuff<br /> | |
| how we do it | |
| </div> | |
| </b> | |
| </div> | |
| </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: #2d2d2d; | |
| } | |
| .Iam { | |
| padding: 2em 5em; | |
| font: normal 40px/50px Montserrat, sans-serif; | |
| color: #999; | |
| } | |
| .Iam p { | |
| height: 50px; | |
| float: left; | |
| margin-right: 0.3em; | |
| } | |
| .Iam b { | |
| float: left; | |
| overflow: hidden; | |
| position: relative; | |
| height: 50px; | |
| top: 40px; | |
| } | |
| .Iam .innerIam { | |
| display: inline-block; | |
| color: #e74c3c; | |
| position: relative; | |
| white-space: nowrap; | |
| top: 0; | |
| left: 0; | |
| /*animation*/ | |
| -webkit-animation:move 5s; | |
| -moz-animation:move 5s; | |
| -ms-animation:move 5s; | |
| -o-animation:move 5s; | |
| animation:move 5s; | |
| /*animation-iteration-count*/ | |
| -webkit-animation-iteration-count:infinite; | |
| -moz-animation-iteration-count:infinite; | |
| -ms-animation-iteration-count:infinite; | |
| -o-animation-iteration-count:infinite; | |
| animation-iteration-count:infinite; | |
| /*animation-delay*/ | |
| -webkit-animation-delay:1s; | |
| -moz-animation-delay:1s; | |
| -ms-animation-delay:1s; | |
| -o-animation-delay:1s; | |
| animation-delay:1s; | |
| } | |
| @keyframes move{ | |
| 0% { top: 0px; } | |
| 20% { top: -50px; } | |
| 40% { top: -100px; } | |
| 60% { top: -150px; } | |
| 80% { top: -200px; } | |
| } | |
| @-webkit-keyframes move { | |
| 0% { top: 0px; } | |
| 20% { top: -50px; } | |
| 40% { top: -100px; } | |
| 60% { top: -150px; } | |
| 80% { top: -200px; } | |
| } | |
| @-moz-keyframes move { | |
| 0% { top: 0px; } | |
| 20% { top: -50px; } | |
| 40% { top: -100px; } | |
| 60% { top: -150px; } | |
| 80% { top: -200px; } | |
| } | |
| @-o-keyframes move { | |
| 0% { top: 0px; } | |
| 20% { top: -50px; } | |
| 40% { top: -100px; } | |
| 60% { top: -150px; } | |
| 80% { top: -200px; } | |
| } | |
| @keyframes move { | |
| 0% { top: 0px; } | |
| 20% { top: -50px; } | |
| 40% { top: -100px; } | |
| 60% { top: -150px; } | |
| 80% { top: -200px; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment