Signature animation (No Javascript!)

HTML
<section> <div class="quote"> <cite> Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi. </cite> <span id="replay">Replay</span> <a id="dex-sign" class="play" href="http://drygiel.com" target="_blank"></a> </div> </section>
LESS
@sign-x: 255px; @sign-y: 84px; @sign-frames: 85; @sign-duration: 3.5s; @sign-delay: .2s; #dex-sign { display: inline-block; margin: 30px 10px 15px 10px; width: @sign-x; height: @sign-y; background: url(http://drygiel.com/projects/sign/frames.png) no-repeat; &.white { background-image: url(http://drygiel.com/projects/sign/frames-255-white.png); } &.play { -moz-animation: sign-anim @sign-duration @sign-delay steps(@sign-frames) forwards; -o-animation: sign-anim @sign-duration @sign-delay steps(@sign-frames) forwards; -webkit-animation: sign-anim @sign-duration @sign-delay steps(@sign-frames) forwards; animation: sign-anim @sign-duration @sign-delay steps(@sign-frames) forwards; } } a#dex-sign { opacity: .9; &:hover { @sign-hover-color-spin: 165deg; opacity: 1; -webkit-filter: ~'invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(@{sign-hover-color-spin})'; } } @-webkit-keyframes sign-anim { to { background-position: 0 @sign-frames * -@sign-y; } } @-moz-keyframes sign-anim { to { background-position: 0 @sign-frames * -@sign-y; } } @keyframes sign-anim { to { background-position: 0 @sign-frames * -@sign-y; } } // _____________________________________________ LAYOUT * { margin: 0; padding: 0; } body, html { font-size: 1em; color: #2C2C2C; height: 100%; font-family: 'Raleway', sans-serif; } ::selection { background: white; } ::-moz-selection { background: white; } section { @color1: #FFF; @color2: #D6D6D6; height: 100%; min-height: 335px; background-color: @color1; background-image: radial-gradient(center top, circle cover, @color1, @color2); background-image: -o-radial-gradient(center top, circle cover, @color1, @color2); background-image: -ms-radial-gradient(center top, circle cover, @color1, @color2); background-image: -moz-radial-gradient(center top, circle cover, @color1, @color2); background-image: -webkit-radial-gradient(center top, circle cover, @color1, @color2); text-align: center; &:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; min-height: 335px; pointer-events: none; opacity: .30; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkYzRUQ1MTgxRjlBMTFFM0FGQjJCNDdCQ0I4MkE3RDUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkYzRUQ1MTkxRjlBMTFFM0FGQjJCNDdCQ0I4MkE3RDUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCRjNFRDUxNjFGOUExMUUzQUZCMkI0N0JDQjgyQTdENSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCRjNFRDUxNzFGOUExMUUzQUZCMkI0N0JDQjgyQTdENSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvRiGgkAAAAkSURBVHjaYvj//z8DCKuqqqaBaEYQgQyY1NTU0pAFMFQABBgAKcEQowsz06AAAAAASUVORK5CYII='); } #replay { position: absolute; z-index: 9999; bottom: -45px; left: 0; display: inline-block; padding: 10px; background: rgba(240, 240, 240, 0.44); border: 1px solid #BABABA; color: #696969; text-transform: uppercase; text-decoration: none; font-size: .6em; -moz-transition: left 6s cubic-bezier(1,.01,1,.01); -o-transition: left 6s cubic-bezier(1,.01,1,.01); -webkit-transition: left 6s cubic-bezier(1,.01,1,.01); transition: left 6s cubic-bezier(1,.01,1,.01); &:hover { left: -100000%; -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; + .play { -moz-animation: none !important; -o-animation: none !important; -webkit-animation: none !important; animation: none !important; } } } .quote { position: absolute; left: 25%; right: 25%; top: 20%; padding: 30px 0 15px 0; cite { color: #000; font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif; letter-spacing: 0.1em; text-align: center; line-height: 110%; font-size: 1.7em; font-variant: small-caps; &:before { content: '’’'; position: absolute; left: -120px; top: 48px; width: 100%; height: 100%; pointer-events: none; font-size: 8em; text-align: left; font-family: Arial; letter-spacing: -16px; font-style: normal; font-weight: bold; color: rgba(0, 0, 0, 0.1); } } #dex-sign { position: absolute; bottom: -95px; right: 0; } } } footer { background-color: #2C2C2C; color: #8A8A8A; padding: 25px; text-align: center; a { text-decoration: none; color: #4384E6; &:hover { color: white; } } }
JAVASCRIPT
// Why it's amazing? // 1. No GIF animation, only lighweight (20KB) PNG sequence animated using CSS3 // 2. 'Replay' animation button with no JS, pure CSS // 3. Change color of sign on hover (Chrome only)
Expand for more options Login