/* fadeIn */ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .u--fadeIn { -webkit-animation: fadeIn 1s ease-in; -moz-animation: fadeIn 1s ease-in; -o-animation: fadeIn 1s ease-in; animation: fadeIn 1s ease-in; } /* fadeInLeft */ @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-50%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translate3d(-50%, 0, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translate3d(-50%, 0, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-50%, 0, 0); } 100% { opacity: 1; transform: none; } } .u--fadeInLeft { -webkit-animation: fadeInLeft 1s ease-in; -moz-animation: fadeInLeft 1s ease-in; -o-animation: fadeInLeft 1s ease-in; animation: fadeInLeft 1s ease-in; } /* fadeInRight */ @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(50%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translate3d(50%, 0, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translate3d(50%, 0, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(50%, 0, 0); } 100% { opacity: 1; transform: none; } } .u--fadeInRight { -webkit-animation: fadeInRight 1s ease-in; -moz-animation: fadeInRight 1s ease-in; -o-animation: fadeInRight 1s ease-in; animation: fadeInRight 1s ease-in; } /* fadeInUp */ @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 50%, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translate3d(0, 50%, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translate3d(0, 50%, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 50%, 0); } 100% { opacity: 1; transform: none; } } .u--fadeInUp { -webkit-animation: fadeInUp 1s ease-in; -moz-animation: fadeInUp 1s ease-in; -o-animation: fadeInUp 1s ease-in; animation: fadeInUp 1s ease-in; } /* fadeInDown */ @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translate3d(0, -50%, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translate3d(0, -50%, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -50%, 0); } 100% { opacity: 1; transform: none; } } .u--fadeInDown { -webkit-animation: fadeInDown 1s ease-in; -moz-animation: fadeInDown 1s ease-in; -o-animation: fadeInDown 1s ease-in; animation: fadeInDown 1s ease-in; } /* fadeOut */ @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeIn { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fadeIn { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeIn { 0% { opacity: 1; } 100% { opacity: 0; } } .u--fadeOut { -webkit-animation: fadeOut 1s ease-out; -moz-animation: fadeOut 1s ease-out; -o-animation: fadeOut 1s ease-out; animation: fadeOut 1s ease-out; } /* fadeOutLeft */ @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translate3d(-50%, 0, 0); } 100% { opacity: 0; -webkit-transform: none; } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -moz-transform: translate3d(-50%, 0, 0); } 100% { opacity: 0; -moz-transform: none; } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; -o-transform: translate3d(-50%, 0, 0); } 100% { opacity: 0; -o-transform: none; } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translate3d(-50%, 0, 0); } 100% { opacity: 0; transform: none; } } .u--fadeOutLeft { -webkit-animation: fadeOutLeft 1s ease-out; -moz-animation: fadeOutLeft 1s ease-out; -o-animation: fadeOutLeft 1s ease-out; animation: fadeOutLeft 1s ease-out; } /* fadeOutRight */ @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translate3d(50%, 0, 0); } 100% { opacity: 0; -webkit-transform: none; } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; -moz-transform: translate3d(50%, 0, 0); } 100% { opacity: 0; -moz-transform: none; } } @-o-keyframes fadeOutRight { 0% { opacity: 1; -o-transform: translate3d(50%, 0, 0); } 100% { opacity: 0; -o-transform: none; } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translate3d(50%, 0, 0); } 100% { opacity: 0; transform: none; } } .u--fadeOutRight { -webkit-animation: fadeOutRight 1s ease-out; -moz-animation: fadeOutRight 1s ease-out; -o-animation: fadeOutRight 1s ease-out; animation: fadeOutRight 1s ease-out; } /* fadeOutUp */ @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translate3d(0, 50%, 0); } 100% { opacity: 0; -webkit-transform: none; } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; -moz-transform: translate3d(0, 50%, 0); } 100% { opacity: 0; -moz-transform: none; } } @-o-keyframes fadeOutUp { 0% { opacity: 1; -o-transform: translate3d(0, 50%, 0); } 100% { opacity: 0; -o-transform: none; } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translate3d(0, 50%, 0); } 100% { opacity: 0; transform: none; } } .u--fadeOutUp { -webkit-animation: fadeOutUp 1s ease-out; -moz-animation: fadeOutUp 1s ease-out; -o-animation: fadeOutUp 1s ease-out; animation: fadeOutUp 1s ease-out; } /* fadeOutDown */ @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translate3d(0, -50%, 0); } 100% { opacity: 0; -webkit-transform: none; } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; -moz-transform: translate3d(0, -50%, 0); } 100% { opacity: 0; -moz-transform: none; } } @-o-keyframes fadeOutDown { 0% { opacity: 1; -o-transform: translate3d(0, -50%, 0); } 100% { opacity: 0; -o-transform: none; } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translate3d(0, -50%, 0); } 100% { opacity: 0; transform: none; } } .u--fadeOutDown { -webkit-animation: fadeOutDown 1s ease-out; -moz-animation: fadeOutDown 1s ease-out; -o-animation: fadeOutDown 1s ease-out; animation: fadeOutDown 1s ease-out; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter