.transparent { opacity: 0; -webkit-transition: opacity 200ms linear } .fades-in { opacity: 1; -webkit-transition: opacity 200ms linear } .fades-in-zoom-slow { opacity: 1; -webkit-animation-name: fades-in-zoom; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-out; } .fades-in-zoom-quick { opacity: 1; -webkit-animation-name: fades-in-zoom; -webkit-animation-duration: 500ms; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-out; } .appears-dramatically { -webkit-animation-name: appears-dramatically; -webkit-animation-duration: 2.5s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; } .speeds-in-left, .speeds-in-right { -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; } .speeds-in-left { -webkit-animation-name: speeds-in-left; } .speeds-in-right { -webkit-animation-name: speeds-in-right; } .booms-out { opacity: 0; -webkit-transform: scale(1.3); -webkit-transition: all 300ms ease-out; } .fades-out { opacity: 0; -webkit-animation-name: fades-in-zoom; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-out; } .shines { text-shadow: none; -webkit-animation-name: shines; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; } .dances { -webkit-animation-name: dances; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; } .y-spin, .x-spin { -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-out; } .y-spin { -webkit-animation-name: y-spin } .x-spin { -webkit-animation-name: x-spin } @-webkit-keyframes fades-in-zoom { 0% { opacity: 0; -webkit-transform: scale(0.8) } 100% { opacity: 1; -webkit-transform: scale(1) } } @-webkit-keyframes shines { 0% { text-shadow: none } 25% { text-shadow: rgb(255, 255, 255) -30px 0px 100px } 50% { text-shadow: rgb(255, 255, 255) 0px 0px 200px } 75% { text-shadow: rgb(255, 255, 255) 30px 0px 100px } 100% { text-shadow: none } } @-webkit-keyframes y-spin { 0% { -webkit-transform: rotateY(0deg) } 50% { -webkit-transform: rotateY(180deg) } 100% { -webkit-transform: rotateY(360deg) } } @-webkit-keyframes x-spin { 0% { -webkit-transform: rotateX(0deg) } 50% { -webkit-transform: rotateX(180deg) } 100% { -webkit-transform: rotateX(360deg) } } @-webkit-keyframes dances { 0% { -webkit-transform: skew(0deg) scale(1) } 12.5% { -webkit-transform: skew(20deg) scale(1.2) } 25% { -webkit-transform: skew(0deg) scale(1) } 37.5% { -webkit-transform: skew(20deg) scale(1.2) } 50% { -webkit-transform: skew(0deg) scale(1) } 62.5% { -webkit-transform: skew(-20deg) scale(1.2) } 75% { -webkit-transform: skew(0deg) scale(1) } 87.5% { -webkit-transform: skew(-20deg) scale(1.2) } 100% { -webkit-transform: skew(0deg) scale(1) } } @-webkit-keyframes appears-dramatically { 0% { opacity: 0; -webkit-transform: scale(0.5) } 10% { opacity: 1; -webkit-transform: scale(0.8) } 90% { opacity: 1; -webkit-transform: scale(1.1) } 100% { opacity: 0; -webkit-transform: scale(1.4) } } @-webkit-keyframes speeds-in-left { 0% { opacity: 0; -webkit-transform: skew(40deg) translate(-4em, 0) } 10% { opacity: 1; -webkit-transform: skew(0deg) translate(-2em, 0) } 90% { opacity: 1; -webkit-transform: skew(0deg) translate(0) } 100% { opacity: 0; -webkit-transform: skew(-40deg) translate(4em, 0) } } @-webkit-keyframes speeds-in-right { 0% { opacity: 0; -webkit-transform: skew(-40deg) translate(4em, 0) } 10% { opacity: 1; -webkit-transform: skew(0deg) translate(2em, 0) } 90% { opacity: 1; -webkit-transform: skew(0deg) translate(0) } 100% { opacity: 0; -webkit-transform: skew(40deg) translate(-4em, 0) } }