Open in different browsers and see how the white lines animate out differently.
A Pen by Mattan Ingram on CodePen.
Created
January 5, 2015 00:37
-
-
Save blueprintmrk/9dbbe81ad7625bad214e to your computer and use it in GitHub Desktop.
Animation out of white strokes is broken in different browsers
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
| <div class="m-logo-wrap"> | |
| <div class="m-logo-red-wrap"> | |
| <svg class="m-logo m-logo-red m-logo-red-triangle" x="0px" y="0px" viewBox="0 0 100 100"> | |
| <path class="m-red" fill="#ED2326" d="M0 100L100 100 100 0z"/> | |
| </svg> | |
| <svg class="m-logo m-logo-red m-logo-stroke m-logo-stroke-red m-logo-stroke-diag" x="0px" y="0px" viewBox="0 0 100 100"> | |
| <line x1="99" y1="1" x2="1" y2="99"/> | |
| </svg> | |
| <svg class="m-logo m-logo-red m-logo-stroke m-logo-stroke-red m-logo-stroke-up" x="0px" y="0px" viewBox="0 0 100 100"> | |
| <line x1="99" y1="99" x2="99" y2="1"/> | |
| </svg> | |
| </div> | |
| <div class="m-logo-blue-wrap"> | |
| <svg class="m-logo m-logo-blue m-logo-blue-triangle" x="0px" y="0px" viewBox="0 0 100 100"> | |
| <path class="m-blue" fill="#008CBE" d="M100 100L0 100 0 0z"/> | |
| </svg> | |
| <svg class="m-logo m-logo-blue m-logo-stroke m-logo-stroke-blue m-logo-stroke-diag" x="0px" y="0px" viewBox="0 0 100 100"> | |
| <line x1="99" y1="99" x2="1" y2="1"/> | |
| </svg> | |
| <svg class="m-logo m-logo-blue m-logo-stroke m-logo-stroke-blue m-logo-stroke-across" x="0px" y="0px" viewBox="0 0 100 100"> | |
| <line x1="1" y1="99" x2="99" y2="99"/> | |
| </svg> | |
| <svg class="m-logo m-logo-blue m-logo-stroke m-logo-stroke-blue m-logo-stroke-up" x="0px" y="0px" viewBox="0 0 100 100"> | |
| <line x1="1" y1="99" x2="1" y2="1"/> | |
| </svg> | |
| </div> | |
| </div> |
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 "bourbon"; | |
| $bg-color: rgb(31,35,43); | |
| // Quad | |
| $easeInQuad : cubic-bezier(0.550, 0.085, 0.680, 0.530); | |
| $easeOutQuad : cubic-bezier(0.250, 0.460, 0.450, 0.940); | |
| $easeInOutQuad : cubic-bezier(0.455, 0.030, 0.515, 0.955); | |
| // Back | |
| $easeInBack : cubic-bezier(0.600, -0.280, 0.735, 0.045); | |
| $easeOutBack : cubic-bezier(0.175, 0.885, 0.320, 1.275); | |
| $easeInOutBack : cubic-bezier(0.680, -0.550, 0.265, 1.550); | |
| html { | |
| background-color: $bg-color; | |
| } | |
| body { | |
| } | |
| .m-logo-wrap { | |
| width: 300px; | |
| height: 300px; | |
| display: block; | |
| position: absolute; | |
| margin-top: -150px; | |
| top: 50%; | |
| margin-left: -150px; | |
| left: 50%; | |
| } | |
| .m-logo { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| left: 0; | |
| bottom: 0; | |
| } | |
| .m-red, .m-blue { | |
| fill-opacity: 0.5; | |
| position: relative; | |
| } | |
| .m-logo-stroke { | |
| fill: none; | |
| stroke: white; | |
| stroke-width: .5; | |
| } | |
| .m-logo-red-triangle { | |
| animation: fadeInShrink .6s $easeOutQuad 1.4s both; | |
| } | |
| .m-logo-blue-triangle { | |
| animation: fadeInShrink .6s $easeOutQuad 1.2s both; | |
| } | |
| // .m-logo-stroke-blue { | |
| // @for $i from 2 through 4 { | |
| // &:nth-child(#{$i}) { | |
| // animation: fadeInShrink .2s $easeOutBack (.2s * $i) both; | |
| // } | |
| // } | |
| // } | |
| // .m-logo-stroke-red { | |
| // @for $i from 2 through 4 { | |
| // &:nth-child(#{$i}) { | |
| // animation: fadeInShrink .2s $easeOutBack (.2s * $i + .7) both; | |
| // } | |
| // } | |
| // } | |
| .m-logo-stroke-blue { | |
| &.m-logo-stroke-up { | |
| animation: fadeInShrink .2s $easeOutQuad .6s both, fadeOutUp .2s $easeInQuad 2s forwards; | |
| } | |
| &.m-logo-stroke-across { | |
| animation: fadeInShrink .2s $easeOutQuad .4s both, fadeOutRight .2s $easeInQuad 2.3s forwards; | |
| } | |
| &.m-logo-stroke-diag { | |
| animation: fadeInDownRight .2s $easeOutQuad both, fadeOutUpLeft .2s $easeInQuad 2.7s forwards; | |
| } | |
| } | |
| .m-logo-stroke-red { | |
| &.m-logo-stroke-up { | |
| animation: fadeInShrink .2s $easeOutQuad .7s both, fadeOutUp .2s $easeInQuad 2.1s forwards; | |
| } | |
| &.m-logo-stroke-diag { | |
| animation: fadeInDownLeft .2s $easeOutQuad .21s both, fadeOutUpRight .2s $easeInQuad 2.8s forwards; | |
| } | |
| } | |
| //KEYFRAMES | |
| //SHRINK | |
| @keyframes fadeInShrink { | |
| 0% { | |
| opacity: 0; | |
| transform: scale(3,3); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: scale(1,1); | |
| } | |
| } | |
| @keyframes fadeOutShrink { | |
| 0% { | |
| opacity: 1; | |
| transform: scale(1,1); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: scale(0,0); | |
| } | |
| } | |
| //DOWN | |
| @keyframes fadeInDown { | |
| 0% { | |
| opacity: 0; | |
| transform: translateY(200px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes fadeOutDown { | |
| 0% { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: translateY(200px); | |
| } | |
| } | |
| //UP | |
| @keyframes fadeInUp { | |
| 0% { | |
| opacity: 0; | |
| transform: translateY(0); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateY(-200px); | |
| } | |
| } | |
| @keyframes fadeOutUp { | |
| 0% { | |
| opacity: 1; | |
| transform: translateY(0px); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: translateY(-200px); | |
| } | |
| } | |
| //LEFT | |
| @keyframes fadeInLeft { | |
| 0% { | |
| opacity: 0; | |
| transform: translateX(-200px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes fadeOutLeft { | |
| 0% { | |
| opacity: 1; | |
| transform: translateX(0px); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: translateX(-200px); | |
| } | |
| } | |
| //RIGHT | |
| @keyframes fadeInRight { | |
| 0% { | |
| opacity: 0; | |
| transform: translateX(200px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes fadeOutRight { | |
| 0% { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: translateX(200px); | |
| } | |
| } | |
| //UP-RIGHT | |
| @keyframes fadeInUpRight { | |
| 0% { | |
| opacity: 0; | |
| transform: translate(200px,-200px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translate(0,0); | |
| } | |
| } | |
| @keyframes fadeOutUpRight { | |
| 0% { | |
| opacity: 1; | |
| transform: translate(0,0); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: translate(200px,-200px); | |
| } | |
| } | |
| //UP-LEFT | |
| @keyframes fadeInUpLeft { | |
| 0% { | |
| opacity: 0; | |
| transform: translate(-200px,-200px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translate(0,0); | |
| } | |
| } | |
| @keyframes fadeOutUpLeft { | |
| 0% { | |
| opacity: 1; | |
| transform: translate(0,0); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: translate(-200px,-200px); | |
| } | |
| } | |
| //DOWN-RIGHT | |
| @keyframes fadeInDownRight { | |
| 0% { | |
| opacity: 0; | |
| transform: translate(200px,200px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translate(0,0); | |
| } | |
| } | |
| @keyframes fadeOutDownRight { | |
| 0% { | |
| opacity: 1; | |
| transform: translate(0,0); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: translate(200px,200px); | |
| } | |
| } | |
| //DOWN-LEFT | |
| @keyframes fadeInDownLeft { | |
| 0% { | |
| opacity: 0; | |
| transform: translate(-200px,200px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translate(0,0); | |
| } | |
| } | |
| @keyframes fadeOutDownLeft { | |
| 0% { | |
| opacity: 1; | |
| transform: translate(0,0); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: translate(-200px,200px); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment