"animation"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/FabioG/pen/QjLreK?limit=all&page=21&q=animation" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'> <style class="cp-pen-styles">body { background-color: #DCDCDC; } .jelly-container { width: 100%; position: relative; height: 500px; overflow: hidden; background: -webkit-linear-gradient(top, rgba(0, 141, 210, 0.63) 0%, transparent 100%); background: linear-gradient(to bottom, rgba(0, 141, 210, 0.63) 0%, transparent 100%); } .jelly-wrapper { width: 265px; position: absolute; -webkit-transform: translate3D(-50%, -75%, 0); transform: translate3D(-50%, -75%, 0); -webkit-animation: jelly-movement 10s infinite linear; animation: jelly-movement 10s infinite linear; } .jelly-hair { height: 75px; width: 100px; background: -webkit-linear-gradient(top, #ef891a 0%, #ef891a 20%, #ebf28a 100%); background: linear-gradient(to bottom, #ef891a 0%, #ef891a 20%, #ebf28a 100%); /* W3C */ position: absolute; left: 29%; -webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -15px, 0) rotate3d(0, 0, 1, 75deg); transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -15px, 0) rotate3d(0, 0, 1, 75deg); border-radius: 25px; -webkit-animation: hair-movement 10s infinite linear; animation: hair-movement 10s infinite linear; } .jelly-body { background: -webkit-linear-gradient(top, #008dd2 0%, #ebf28a 100%); background: linear-gradient(to bottom, #008dd2 0%, #ebf28a 100%); /* W3C */ position: relative; height: 250px; width: 100%; overflow: hidden; z-index: 1; -webkit-animation: head-movement 10s infinite linear; animation: head-movement 10s infinite linear; } .jelly-inner { position: absolute; left: 50%; top: 35%; -webkit-animation: facing-movement 10s infinite linear; animation: facing-movement 10s infinite linear; } .jelly-eyes:before, .jelly-eyes:after { content: ''; position: absolute; height: 15px; bottom: -25px; width: 15px; border-radius: 50%; background-color: #FFF; -webkit-animation: eyes-blink 3.5s infinite linear; animation: eyes-blink 3.5s infinite linear; } .jelly-eyes { position: absolute; top: -40px; -webkit-animation: eyes-movement 10s infinite linear; animation: eyes-movement 10s infinite linear; } .jelly-eyes:before { left: 60px; } .jelly-eyes:after { left: -70px; } .jelly-hands:before, .jelly-hands:after { content: ''; position: absolute; height: 50px; width: 45px; border-top: 0; border-radius: 0 0 50% 50%; box-shadow: 0px 5px 6px #3B949B; } .jelly-hands { position: absolute; top: 65px; } .jelly-hands:before { left: 110px; } .jelly-hands:after { left: -155px; } .jelly-mouth { position: absolute; height: 80px; width: 200px; left: 50%; top: 35%; -webkit-transform: translate3D(-50%, 0, 0); transform: translate3D(-50%, 0, 0); background-color: #F4CFD1; border-radius: 30px; box-shadow: 0px 0px 7px #808080; } .jelly-mouth:after { content: ''; position: absolute; height: 3%; width: 60%; background-color: #FF9393; left: 50%; top: 50%; -webkit-transform: translate3D(-50%, 0, 0); transform: translate3D(-50%, 0, 0); box-shadow: 0 0 3px #FF6B6B; -webkit-animation: mouth-movement 10s infinite linear; animation: mouth-movement 10s infinite linear; } div[class^="jelly-tentacle-"] { height: 50px; width: 50px; position: absolute; background-color: #ebf28a; border-radius: 0 0 25px 25px; box-shadow: 0px 2.5px 0px #008D9B; } .jelly-tentacle-1 { left: 0%; -webkit-animation: tentacle-animation 1s infinite cubic-bezier(0.46, 0.2, 0.53, 0.92) -0.2s; animation: tentacle-animation 1s infinite cubic-bezier(0.46, 0.2, 0.53, 0.92) -0.2s; } .jelly-tentacle-2 { left: 25%; -webkit-transform: translate3D(-25%, 0, 0); transform: translate3D(-25%, 0, 0); -webkit-animation: tentacle-animation 1s infinite cubic-bezier(0.46, 0.2, 0.53, 0.92) -0.4s; animation: tentacle-animation 1s infinite cubic-bezier(0.46, 0.2, 0.53, 0.92) -0.4s; } .jelly-tentacle-3 { left: 50%; -webkit-transform: translate3D(-50%, 0, 0); transform: translate3D(-50%, 0, 0); -webkit-animation: tentacle-animation 1s infinite cubic-bezier(0.46, 0.2, 0.53, 0.92) -0.1s; animation: tentacle-animation 1s infinite cubic-bezier(0.46, 0.2, 0.53, 0.92) -0.1s; } .jelly-tentacle-4 { right: 25%; -webkit-transform: translate3D(25%, 0, 0); transform: translate3D(25%, 0, 0); -webkit-animation: tentacle-animation 1s infinite cubic-bezier(0.46, 0.2, 0.53, 0.92) -0.7s; animation: tentacle-animation 1s infinite cubic-bezier(0.46, 0.2, 0.53, 0.92) -0.7s; } .jelly-tentacle-5 { right: 0%; -webkit-animation: tentacle-animation 1s infinite cubic-bezier(0.46, 0.2, 0.53, 0.92) -0.3s; animation: tentacle-animation 1s infinite cubic-bezier(0.46, 0.2, 0.53, 0.92) -0.3s; } .jelly-shadow { position: absolute; height: 15px; border-radius: 50%; background-color: rgba(134, 134, 134, 0.23); box-shadow: 0 0 10px rgba(134, 134, 134, 0.23); bottom: 5%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); -webkit-animation: shadow-movement 10s infinite linear; animation: shadow-movement 10s infinite linear; } div[class^="bubble-"] { height: 1px; width: 1px; position: absolute; background-color: rgba(0, 141, 210, 0.3); border-radius: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } div[class^="bubble-"]:after { content: ''; position: absolute; height: 85%; width: 85%; border-top: 1px solid rgba(255, 255, 255, 0.63); border-radius: 50%; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0) rotateZ(-45deg); transform: translate3d(-50%, -50%, 0) rotateZ(-45deg); } .bubble-1 { bottom: 9px; left: 13%; -webkit-animation: bubble-movement 4s infinite ease-in -2.61s; animation: bubble-movement 4s infinite ease-in -2.61s; } .bubble-2 { bottom: 8px; left: 2%; -webkit-animation: bubble-movement 4s infinite ease-in -0.86s; animation: bubble-movement 4s infinite ease-in -0.86s; } .bubble-3 { bottom: 11px; left: 76%; -webkit-animation: bubble-movement 4s infinite ease-in -1.98s; animation: bubble-movement 4s infinite ease-in -1.98s; } .bubble-4 { bottom: 11px; left: 4%; -webkit-animation: bubble-movement 4s infinite ease-in -2.55s; animation: bubble-movement 4s infinite ease-in -2.55s; } .bubble-5 { bottom: 11px; left: 42%; -webkit-animation: bubble-movement 4s infinite ease-in -1.19s; animation: bubble-movement 4s infinite ease-in -1.19s; } .bubble-6 { bottom: 10px; left: 27%; -webkit-animation: bubble-movement 4s infinite ease-in -1.78s; animation: bubble-movement 4s infinite ease-in -1.78s; } .bubble-7 { bottom: 3px; left: 42%; -webkit-animation: bubble-movement 4s infinite ease-in -2.97s; animation: bubble-movement 4s infinite ease-in -2.97s; } .bubble-8 { bottom: 10px; left: 3%; -webkit-animation: bubble-movement 4s infinite ease-in -0.57s; animation: bubble-movement 4s infinite ease-in -0.57s; } .bubble-9 { bottom: 7px; left: 86%; -webkit-animation: bubble-movement 4s infinite ease-in -2.15s; animation: bubble-movement 4s infinite ease-in -2.15s; } .bubble-10 { bottom: 5px; left: 18%; -webkit-animation: bubble-movement 4s infinite ease-in -1.61s; animation: bubble-movement 4s infinite ease-in -1.61s; } .bubble-11 { bottom: 3px; left: 39%; -webkit-animation: bubble-movement 3s infinite ease-in -1.71s; animation: bubble-movement 3s infinite ease-in -1.71s; } .bubble-12 { bottom: 4px; left: 72%; -webkit-animation: bubble-movement 3s infinite ease-in -0.59s; animation: bubble-movement 3s infinite ease-in -0.59s; } .bubble-13 { bottom: 5px; left: 24%; -webkit-animation: bubble-movement 3s infinite ease-in -2.62s; animation: bubble-movement 3s infinite ease-in -2.62s; } .bubble-14 { bottom: 3px; left: 7%; -webkit-animation: bubble-movement 3s infinite ease-in -2.89s; animation: bubble-movement 3s infinite ease-in -2.89s; } .bubble-15 { bottom: 8px; left: 73%; -webkit-animation: bubble-movement 3s infinite ease-in -1.15s; animation: bubble-movement 3s infinite ease-in -1.15s; } .bubble-16 { bottom: 8px; left: 72%; -webkit-animation: bubble-movement 3s infinite ease-in -2.7s; animation: bubble-movement 3s infinite ease-in -2.7s; } .bubble-17 { bottom: 8px; left: 6%; -webkit-animation: bubble-movement 3s infinite ease-in -1.87s; animation: bubble-movement 3s infinite ease-in -1.87s; } .bubble-18 { bottom: 2px; left: 79%; -webkit-animation: bubble-movement 3s infinite ease-in -0.31s; animation: bubble-movement 3s infinite ease-in -0.31s; } .bubble-19 { bottom: 10px; left: 84%; -webkit-animation: bubble-movement 3s infinite ease-in -1.37s; animation: bubble-movement 3s infinite ease-in -1.37s; } .bubble-20 { bottom: 11px; left: 53%; -webkit-animation: bubble-movement 3s infinite ease-in -0.14s; animation: bubble-movement 3s infinite ease-in -0.14s; } @-webkit-keyframes jelly-movement { 0% { top: 55%; left: 50%; } 5% { top: 50%; } 10% { top: 55%; } 15% { top: 50%; } 20% { top: 55%; } 25% { top: 50%; left: calc(100% - 135px); } 30% { top: 55%; } 35% { top: 50%; } 40% { top: 55%; } 45% { top: 50%; } 50% { top: 55%; left: 50%; } 55% { top: 50%; } 60% { top: 55%; } 65% { top: 50%; } 70% { top: 55%; } 75% { top: 50%; left: 135px; } 80% { top: 55%; } 85% { top: 50%; } 90% { top: 55%; } 95% { top: 50%; } 100% { top: 55%; left: 50%; } } @keyframes jelly-movement { 0% { top: 55%; left: 50%; } 5% { top: 50%; } 10% { top: 55%; } 15% { top: 50%; } 20% { top: 55%; } 25% { top: 50%; left: calc(100% - 135px); } 30% { top: 55%; } 35% { top: 50%; } 40% { top: 55%; } 45% { top: 50%; } 50% { top: 55%; left: 50%; } 55% { top: 50%; } 60% { top: 55%; } 65% { top: 50%; } 70% { top: 55%; } 75% { top: 50%; left: 135px; } 80% { top: 55%; } 85% { top: 50%; } 90% { top: 55%; } 95% { top: 50%; } 100% { top: 55%; left: 50%; } } @-webkit-keyframes tentacle-animation { 0% { bottom: -8%; } 50% { bottom: -20%; } 100% { bottom: -8%; } } @keyframes tentacle-animation { 0% { bottom: -8%; } 50% { bottom: -20%; } 100% { bottom: -8%; } } @-webkit-keyframes facing-movement { 0% { left: 60%; } 20% { left: 60%; } 25% { left: 50%; } 30% { left: 40%; } 70% { left: 40%; } 75% { left: 50%; } 80% { left: 60%; } 100% { left: 60%; } } @keyframes facing-movement { 0% { left: 60%; } 20% { left: 60%; } 25% { left: 50%; } 30% { left: 40%; } 70% { left: 40%; } 75% { left: 50%; } 80% { left: 60%; } 100% { left: 60%; } } @-webkit-keyframes mouth-movement { 0% { left: 52%; } 20% { left: 52%; } 25% { left: 50%; } 30% { left: 46%; } 70% { left: 46%; } 75% { left: 50%; } 80% { left: 52%; } 100% { left: 52%; } } @keyframes mouth-movement { 0% { left: 52%; } 20% { left: 52%; } 25% { left: 50%; } 30% { left: 46%; } 70% { left: 46%; } 75% { left: 50%; } 80% { left: 52%; } 100% { left: 52%; } } @-webkit-keyframes eyes-movement { 0% { left: 5px; } 20% { left: 5px; } 25% { left: 0px; } 30% { left: -5px; } 70% { left: -5px; } 75% { left: 0px; } 80% { left: 5px; } 100% { left: 5px; } } @keyframes eyes-movement { 0% { left: 5px; } 20% { left: 5px; } 25% { left: 0px; } 30% { left: -5px; } 70% { left: -5px; } 75% { left: 0px; } 80% { left: 5px; } 100% { left: 5px; } } @-webkit-keyframes head-movement { 0% { border-top-right-radius: 70px; border-top-left-radius: 90px; } 20% { border-top-right-radius: 70px; border-top-left-radius: 90px; } 25% { border-top-right-radius: 80px; border-top-left-radius: 80px; } 30% { border-top-right-radius: 90px; border-top-left-radius: 70px; } 70% { border-top-right-radius: 90px; border-top-left-radius: 70px; } 75% { border-top-right-radius: 80px; border-top-left-radius: 80px; } 80% { border-top-right-radius: 70px; border-top-left-radius: 90px; } 100% { border-top-right-radius: 70px; border-top-left-radius: 90px; } } @keyframes head-movement { 0% { border-top-right-radius: 70px; border-top-left-radius: 90px; } 20% { border-top-right-radius: 70px; border-top-left-radius: 90px; } 25% { border-top-right-radius: 80px; border-top-left-radius: 80px; } 30% { border-top-right-radius: 90px; border-top-left-radius: 70px; } 70% { border-top-right-radius: 90px; border-top-left-radius: 70px; } 75% { border-top-right-radius: 80px; border-top-left-radius: 80px; } 80% { border-top-right-radius: 70px; border-top-left-radius: 90px; } 100% { border-top-right-radius: 70px; border-top-left-radius: 90px; } } @-webkit-keyframes hair-movement { 0% { -webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); } 20% { -webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); } 25% { -webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); transform: rotate3d(0, 1, 0, 90deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); } 30% { -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); transform: rotate3d(0, 1, 0, 0deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); } 70% { -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); transform: rotate3d(0, 1, 0, 0deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); } 75% { -webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); transform: rotate3d(0, 1, 0, 90deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); } 80% { -webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); } } @keyframes hair-movement { 0% { -webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); } 20% { -webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); } 25% { -webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); transform: rotate3d(0, 1, 0, 90deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); } 30% { -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); transform: rotate3d(0, 1, 0, 0deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); } 70% { -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); transform: rotate3d(0, 1, 0, 0deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); } 75% { -webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); transform: rotate3d(0, 1, 0, 90deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); } 80% { -webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg); } } @-webkit-keyframes shadow-movement { 0% { width: 250px; left: 50%; } 5% { width: 210px; } 10% { width: 250px; } 15% { width: 210px; } 20% { width: 250px; } 25% { width: 210px; left: calc(100% - 135px); } 30% { width: 250px; } 35% { width: 210px; } 40% { width: 250px; } 45% { width: 210px; } 50% { width: 250px; left: 50%; } 55% { width: 210px; } 60% { width: 250px; } 65% { width: 210px; } 70% { width: 250px; } 75% { width: 210px; left: 135px; } 80% { width: 250px; } 85% { width: 210px; } 90% { width: 250px; } 95% { width: 210px; } 100% { width: 250px; left: 50%; } } @keyframes shadow-movement { 0% { width: 250px; left: 50%; } 5% { width: 210px; } 10% { width: 250px; } 15% { width: 210px; } 20% { width: 250px; } 25% { width: 210px; left: calc(100% - 135px); } 30% { width: 250px; } 35% { width: 210px; } 40% { width: 250px; } 45% { width: 210px; } 50% { width: 250px; left: 50%; } 55% { width: 210px; } 60% { width: 250px; } 65% { width: 210px; } 70% { width: 250px; } 75% { width: 210px; left: 135px; } 80% { width: 250px; } 85% { width: 210px; } 90% { width: 250px; } 95% { width: 210px; } 100% { width: 250px; left: 50%; } } @-webkit-keyframes eyes-blink { 0% { height: 15px; } 3% { height: 1px; } 5% { height: 15px; } 100% { height: 15px; } } @keyframes eyes-blink { 0% { height: 15px; } 3% { height: 1px; } 5% { height: 15px; } 100% { height: 15px; } } @-webkit-keyframes bubble-movement { 0% { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); height: 1px; width: 1px; } 100% { -webkit-transform: translate3d(-50%, -500px, 0); transform: translate3d(-50%, -500px, 0); height: 75px; width: 75px; } } @keyframes bubble-movement { 0% { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); height: 1px; width: 1px; } 100% { -webkit-transform: translate3d(-50%, -500px, 0); transform: translate3d(-50%, -500px, 0); height: 75px; width: 75px; } } </style></head><body> <div class="jelly-container"> <div class="bubble-1"></div> <div class="bubble-2"></div> <div class="bubble-3"></div> <div class="bubble-4"></div> <div class="bubble-5"></div> <div class="bubble-6"></div> <div class="bubble-7"></div> <div class="bubble-8"></div> <div class="bubble-9"></div> <div class="bubble-10"></div> <div class="jelly-wrapper"> <div class="jelly-hair"></div> <div class="jelly-body"> <div class="jelly-inner"> <div class="jelly-eyes"></div> <div class="jelly-mouth"></div> <div class="jelly-hands"></div> </div> </div> <div class="jelly-tentacle-1"></div> <div class="jelly-tentacle-2"></div> <div class="jelly-tentacle-3"></div> <div class="jelly-tentacle-4"></div> <div class="jelly-tentacle-5"></div> </div> <div class="jelly-shadow"></div> <div class="bubble-11"></div> <div class="bubble-12"></div> <div class="bubble-13"></div> <div class="bubble-14"></div> <div class="bubble-15"></div> <div class="bubble-16"></div> <div class="bubble-17"></div> <div class="bubble-18"></div> <div class="bubble-19"></div> <div class="bubble-20"></div> </div> </body></html>

Related: See More


Questions / Comments: