coffee – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:41:41 +0000 en-US hourly 1 Coffee Beans CSS Animation https://thingography.com/css-coffee/ https://thingography.com/css-coffee/#respond Sun, 18 Feb 2018 19:02:54 +0000 http://thingography.com/my-things/?p=75 .ani-box {position: relative; height: 600px; width: 100%;} #all { margin-top: 0; width: 100%; height: 100%; overflow: hidden; position: relative; background: rgb(191,159,102); background: -moz-linear-gradient(top, rgb(191,159,102) 0%, rgb(108,54,20) 100%); background: -webkit-linear-gradient(top, rgb(191,159,102) 0%,rgb(108,54,20) 100%); background: linear-gradient(to bottom, rgb(191,159,102) 0%,rgb(108,54,20) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf9f66', endColorstr='#6c3614',GradientType=0 ); } .bean1, .bean2, .bean3, .bean4, .bean6, .bean5, .bean7, .bean8, .bean9, .bean10, .bean11, .bean12, .bean13, .bean14, .bean15, .bean16, .bean17, .bean18, .bean19, .bean20, .bean21, .bean22, .bean23, .bean24 { position: absolute; z-index: 10; visibility: hidden; } /* === Media Query === */ @media screen and (max-width: 480px) { #text a { letter-spacing: 2px; font-size: 2em; text-shadow: 0 0 1px #000; } #text { margin: 2em auto 0 auto; } } /* ========== Bean Placement and animation setup for 8 x 3 different beans ========== */ .bean1 { margin-left: 8%; animation: floatsmall 18s linear infinite; } .bean2 { margin-left: 35%; animation: float 10s linear infinite; } .bean3 { margin-left: 75%; animation: float 11s linear infinite, left 11s infinite; } .bean4 { margin-left: 60%; animation: float 12s linear infinite; } .bean5 { margin-left: 85%; animation: floatsmall 8s linear infinite; } .bean6 { margin-left: 20%; animation: float 12s linear infinite, left 12s infinite; } .bean7 { margin-left: 30%; animation: floatsmall 9s linear infinite, right 9s infinite; } .bean8 { margin-left: 45%; animation: float 7s linear infinite; } .bean9 { margin-left: 1%; animation: float 10s linear infinite, right 10s infinite; } .bean10 { margin-left: 96%; animation: float 15s linear infinite, right 15s infinite; } .bean11 { margin-left: 52%; animation: float 18s linear infinite; } .bean12 { margin-left: 92%; animation: float 13s linear infinite; } .bean13 { margin-left: 17%; animation: float 17s linear infinite; } .bean14 { margin-left: 67%; animation: float 15s linear infinite; } .bean15 { margin-left: 77%; animation: float 10s linear infinite; } .bean16 { margin-left: 20%; animation:float 20s linear infinite; } .bean17 { margin-left: 57%; animation:float 8s linear infinite; } .bean18 { margin-left: 60%; animation: floatsmall 14s linear infinite; } .bean19 { margin-left: 44%; animation:float 17s linear infinite; } .bean20 { margin-left: 41%; animation:float 11s linear infinite; } .bean21 { margin-left: 32%; animation: floatsmall 20s linear infinite; } .bean22 { margin-left: 70%; animation: float 20s linear infinite, left 20s infinite; } .bean23 { margin-left: 10%; animation:float 19s linear infinite; } .bean24 { margin-left: 20%; animation: float 16s linear infinite; } /* Coffee Bean Animation Keyframes */ @keyframes float { 0% {visibility:visible; top:-20%; transform:rotateZ( 0deg);} 100%{visibility:visible; top:1000px; transform:rotateZ(720deg);} } /* === FLOATSMALL === */ @keyframes floatsmall { 0% {visibility:visible; top:-20%; transform:rotateZ( 0deg);} 100%{visibility:visible; top:1000px; transform:rotateZ(720deg);} } /* === LEFT === */ } @keyframes left { 0% {visibility:visible; transform:translateX( 0px) rotateZ( 0deg);} 100%{visibility:visible; transform:translateX(-400px) rotateZ(720deg);} } /* === RIGHT === */ @keyframes right { 0% {visibility:visible; transform:translateX( 0px) rotateZ( 0deg);} 100%{visibility:visible; transform:translateX(300px) rotateZ(-720deg);} }
bean1
bean2
bean3
bean4
bean5
bean6
bean7
bean8
bean1
bean2
bean3
bean4
bean5
bean6
bean7
bean8
bean1
bean2
bean3
bean4
bean5
bean6
bean7
bean8

It’s raining coffee beans! The falling coffee beans CSS animation gives the illusion of perpetual falling coffee beans. Substituting the coffee bean images with other images can create a magnitude of effects as with other animations in my collection.

]]> https://thingography.com/css-coffee/feed/ 0