Motion
How do I make an motion?
What is a motion? How do you make a motion? This script and codes were developed by Carl Calderon on 30 July 2022, Saturday.
Motion - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Motion</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul> <li> <div class='box heavy-shoes'></div> <b>heavy shoes</b> </li> <li> <div class='box sticky-floor'></div> <b>sticky floor</b> </li> <li> <div class='box old-jello'></div> <b>old jello</b> </li> <li> <div class='box new-jello'></div> <b>new jello</b> </li> <li> <div class='box force'></div> <b>force</b> </li> <li> <div class='box ollie'></div> <b>ollie</b> </li> <li> <div class='box kick-flip'></div> <b>kick flip</b> </li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Motion - Script Codes CSS Codes
@-moz-keyframes heavy-shoes { 0% { height: 90px; -moz-transform: translateY(0px); transform: translateY(0px); } 10% { height: 80px; -moz-transform: translateY(10px); transform: translateY(10px); } 50% { height: 120px; -moz-transform: translateY(-30px); transform: translateY(-30px); } 60% { height: 110px; -moz-transform: translateY(-60px); transform: translateY(-60px); } 75% { height: 80px; -moz-transform: translateY(-40px); transform: translateY(-40px); } 90% { height: 90px; -moz-transform: translateY(0px); transform: translateY(0px); }
}
@-webkit-keyframes heavy-shoes { 0% { height: 90px; -webkit-transform: translateY(0px); transform: translateY(0px); } 10% { height: 80px; -webkit-transform: translateY(10px); transform: translateY(10px); } 50% { height: 120px; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { height: 110px; -webkit-transform: translateY(-60px); transform: translateY(-60px); } 75% { height: 80px; -webkit-transform: translateY(-40px); transform: translateY(-40px); } 90% { height: 90px; -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes heavy-shoes { 0% { height: 90px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } 10% { height: 80px; -moz-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); } 50% { height: 120px; -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { height: 110px; -moz-transform: translateY(-60px); -ms-transform: translateY(-60px); -webkit-transform: translateY(-60px); transform: translateY(-60px); } 75% { height: 80px; -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -webkit-transform: translateY(-40px); transform: translateY(-40px); } 90% { height: 90px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@-moz-keyframes jello { 0% { height: 90px; -moz-transform: translateY(0px); transform: translateY(0px); } 10% { height: 80px; -moz-transform: translateY(10px); transform: translateY(10px); } 50% { height: 120px; -moz-transform: translateY(-30px); transform: translateY(-30px); } 55% { height: 60px; -moz-transform: translateY(-50px); transform: translateY(-50px); } 60% { height: 80px; -moz-transform: translateY(-60px); transform: translateY(-60px); } 65% { height: 70px; -moz-transform: translateY(-55px); transform: translateY(-55px); } 90% { height: 90px; -moz-transform: translateY(0px); transform: translateY(0px); }
}
@-webkit-keyframes jello { 0% { height: 90px; -webkit-transform: translateY(0px); transform: translateY(0px); } 10% { height: 80px; -webkit-transform: translateY(10px); transform: translateY(10px); } 50% { height: 120px; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 55% { height: 60px; -webkit-transform: translateY(-50px); transform: translateY(-50px); } 60% { height: 80px; -webkit-transform: translateY(-60px); transform: translateY(-60px); } 65% { height: 70px; -webkit-transform: translateY(-55px); transform: translateY(-55px); } 90% { height: 90px; -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes jello { 0% { height: 90px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } 10% { height: 80px; -moz-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); } 50% { height: 120px; -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); } 55% { height: 60px; -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -webkit-transform: translateY(-50px); transform: translateY(-50px); } 60% { height: 80px; -moz-transform: translateY(-60px); -ms-transform: translateY(-60px); -webkit-transform: translateY(-60px); transform: translateY(-60px); } 65% { height: 70px; -moz-transform: translateY(-55px); -ms-transform: translateY(-55px); -webkit-transform: translateY(-55px); transform: translateY(-55px); } 90% { height: 90px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@-moz-keyframes force { 0% { height: 90px; -moz-transform: translateY(0px); transform: translateY(0px); } 40% { height: 60px; width: 120px; -moz-transform: translate(-15px, 30px); transform: translate(-15px, 30px); } 50% { height: 120px; width: 80px; -moz-transform: translate(5px, -30px); transform: translate(5px, -30px); } 55% { height: 60px; width: 90px; -moz-transform: translate(0px, -50px); transform: translate(0px, -50px); } 60% { height: 80px; -moz-transform: translateY(-60px); transform: translateY(-60px); } 65% { height: 70px; -moz-transform: translateY(-55px); transform: translateY(-55px); } 90% { height: 90px; -moz-transform: translateY(0px); transform: translateY(0px); }
}
@-webkit-keyframes force { 0% { height: 90px; -webkit-transform: translateY(0px); transform: translateY(0px); } 40% { height: 60px; width: 120px; -webkit-transform: translate(-15px, 30px); transform: translate(-15px, 30px); } 50% { height: 120px; width: 80px; -webkit-transform: translate(5px, -30px); transform: translate(5px, -30px); } 55% { height: 60px; width: 90px; -webkit-transform: translate(0px, -50px); transform: translate(0px, -50px); } 60% { height: 80px; -webkit-transform: translateY(-60px); transform: translateY(-60px); } 65% { height: 70px; -webkit-transform: translateY(-55px); transform: translateY(-55px); } 90% { height: 90px; -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes force { 0% { height: 90px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } 40% { height: 60px; width: 120px; -moz-transform: translate(-15px, 30px); -ms-transform: translate(-15px, 30px); -webkit-transform: translate(-15px, 30px); transform: translate(-15px, 30px); } 50% { height: 120px; width: 80px; -moz-transform: translate(5px, -30px); -ms-transform: translate(5px, -30px); -webkit-transform: translate(5px, -30px); transform: translate(5px, -30px); } 55% { height: 60px; width: 90px; -moz-transform: translate(0px, -50px); -ms-transform: translate(0px, -50px); -webkit-transform: translate(0px, -50px); transform: translate(0px, -50px); } 60% { height: 80px; -moz-transform: translateY(-60px); -ms-transform: translateY(-60px); -webkit-transform: translateY(-60px); transform: translateY(-60px); } 65% { height: 70px; -moz-transform: translateY(-55px); -ms-transform: translateY(-55px); -webkit-transform: translateY(-55px); transform: translateY(-55px); } 90% { height: 90px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@-moz-keyframes ollie { 0% { height: 90px; -moz-transform: translateY(0px); transform: translateY(0px); } 40% { height: 70px; width: 90px; -moz-transform-origin: 0% 100%; transform-origin: 0% 100%; -moz-transform: translate(0px, 20px) rotate(-45deg) skew(-20deg, 0deg); transform: translate(0px, 20px) rotate(-45deg) skew(-20deg, 0deg); } 70% { height: 80px; width: 90px; -moz-transform: translate(0px, -70px); transform: translate(0px, -70px); } 90% { height: 90px; -moz-transform: translateY(0px); transform: translateY(0px); }
}
@-webkit-keyframes ollie { 0% { height: 90px; -webkit-transform: translateY(0px); transform: translateY(0px); } 40% { height: 70px; width: 90px; -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: translate(0px, 20px) rotate(-45deg) skew(-20deg, 0deg); transform: translate(0px, 20px) rotate(-45deg) skew(-20deg, 0deg); } 70% { height: 80px; width: 90px; -webkit-transform: translate(0px, -70px); transform: translate(0px, -70px); } 90% { height: 90px; -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes ollie { 0% { height: 90px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } 40% { height: 70px; width: 90px; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -moz-transform: translate(0px, 20px) rotate(-45deg) skew(-20deg, 0deg); -ms-transform: translate(0px, 20px) rotate(-45deg) skew(-20deg, 0deg); -webkit-transform: translate(0px, 20px) rotate(-45deg) skew(-20deg, 0deg); transform: translate(0px, 20px) rotate(-45deg) skew(-20deg, 0deg); } 70% { height: 80px; width: 90px; -moz-transform: translate(0px, -70px); -ms-transform: translate(0px, -70px); -webkit-transform: translate(0px, -70px); transform: translate(0px, -70px); } 90% { height: 90px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@-moz-keyframes kick-flip { 0% { height: 90px; -moz-transform: translateY(0px); transform: translateY(0px); } 40% { height: 70px; width: 90px; -moz-transform-origin: 0% 100%; transform-origin: 0% 100%; -moz-transform: translate(0px, 20px) rotate(-45deg) skew(-20deg, 0deg); transform: translate(0px, 20px) rotate(-45deg) skew(-20deg, 0deg); } 65% { height: 80px; width: 90px; -moz-transform: translate(0px, -70px) rotate(5deg) skew(5deg); transform: translate(0px, -70px) rotate(5deg) skew(5deg); } 90% { height: 90px; -moz-transform: translateY(0px); transform: translateY(0px); }
}
@-webkit-keyframes kick-flip { 0% { height: 90px; -webkit-transform: translateY(0px); transform: translateY(0px); } 40% { height: 70px; width: 90px; -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: translate(0px, 20px) rotate(-45deg) skew(-20deg, 0deg); transform: translate(0px, 20px) rotate(-45deg) skew(-20deg, 0deg); } 65% { height: 80px; width: 90px; -webkit-transform: translate(0px, -70px) rotate(5deg) skew(5deg); transform: translate(0px, -70px) rotate(5deg) skew(5deg); } 90% { height: 90px; -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes kick-flip { 0% { height: 90px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } 40% { height: 70px; width: 90px; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -moz-transform: translate(0px, 20px) rotate(-45deg) skew(-20deg, 0deg); -ms-transform: translate(0px, 20px) rotate(-45deg) skew(-20deg, 0deg); -webkit-transform: translate(0px, 20px) rotate(-45deg) skew(-20deg, 0deg); transform: translate(0px, 20px) rotate(-45deg) skew(-20deg, 0deg); } 65% { height: 80px; width: 90px; -moz-transform: translate(0px, -70px) rotate(5deg) skew(5deg); -ms-transform: translate(0px, -70px) rotate(5deg) skew(5deg); -webkit-transform: translate(0px, -70px) rotate(5deg) skew(5deg); transform: translate(0px, -70px) rotate(5deg) skew(5deg); } 90% { height: 90px; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); }
}
body { padding: 100px; text-align: center;
}
.box { display: block; float: left; position: relative; width: 90px; height: 90px; background: gray; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.box:after, .box:before { content: ""; position: absolute; left: 50%; top: 20px; width: 30px; height: 30px; background: lightgray; -moz-border-radius: 50ex; -webkit-border-radius: 50ex; border-radius: 50ex;
}
.box:before { -moz-transform: translateX(-35px); -ms-transform: translateX(-35px); -webkit-transform: translateX(-35px); transform: translateX(-35px);
}
.box:after { -moz-transform: translateX(5px); -ms-transform: translateX(5px); -webkit-transform: translateX(5px); transform: translateX(5px);
}
li { display: inline-block; width: 90px; height: 120px; margin: 30px; text-align: center; position: relative;
}
li b { position: absolute; bottom: 0px; left: 0px; width: 100%; font-weight: bold; font-size: 9px; font: 9px Arial, sans-serif; color: gray; text-transform: uppercase; text-align: center;
}
.heavy-shoes { -webkit-animation: heavy-shoes 1s 0s infinite linear; -moz-animation: heavy-shoes 1s 0s infinite linear; -o-animation: heavy-shoes 1s 0s infinite linear; animation: heavy-shoes 1s 0s infinite linear;
}
.sticky-floor { -webkit-animation: heavy-shoes 1s 0s infinite ease-out; -moz-animation: heavy-shoes 1s 0s infinite ease-out; -o-animation: heavy-shoes 1s 0s infinite ease-out; animation: heavy-shoes 1s 0s infinite ease-out;
}
.old-jello { -webkit-animation: jello 1s 0s infinite linear; -moz-animation: jello 1s 0s infinite linear; -o-animation: jello 1s 0s infinite linear; animation: jello 1s 0s infinite linear;
}
.new-jello { -webkit-animation: jello 1s 0s infinite ease-out; -moz-animation: jello 1s 0s infinite ease-out; -o-animation: jello 1s 0s infinite ease-out; animation: jello 1s 0s infinite ease-out;
}
.force { -webkit-animation: force 1s 0s infinite linear; -moz-animation: force 1s 0s infinite linear; -o-animation: force 1s 0s infinite linear; animation: force 1s 0s infinite linear;
}
.ollie { -webkit-animation: ollie 1s 0s infinite ease-in; -moz-animation: ollie 1s 0s infinite ease-in; -o-animation: ollie 1s 0s infinite ease-in; animation: ollie 1s 0s infinite ease-in;
}
.kick-flip { -webkit-animation: kick-flip 1s 0s infinite ease; -moz-animation: kick-flip 1s 0s infinite ease; -o-animation: kick-flip 1s 0s infinite ease; animation: kick-flip 1s 0s infinite ease;
}
Developer | Carl Calderon |
Username | carlcalderon |
Uploaded | July 30, 2022 |
Rating | 3 |
Size | 4,015 Kb |
Views | 38,456 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Single Element CSS Stickers | 2,690 Kb |
Project Euler - Problem 2 | 2,507 Kb |
Flat Adobe Icons | 5,714 Kb |
Nonsense 1 | 2,616 Kb |
Project Euler - Problem 1 | 2,126 Kb |
Babsan Difference Check | 4,122 Kb |
Bayer ordered dithering | 146,053 Kb |
Foldable list with Chuck Norris facts | 5,984 Kb |
Floyd-Steinberg dithering | 145,855 Kb |
A Pen by Carl Calderon | 3,738 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by Paul Sullivan | Pwsm50 | 2,349 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
Responsive Menu I | Rodericksandoval | 3,045 Kb |
AOR site logo | Thatbram | 2,527 Kb |
Background Images | Jooonebug | 2,100 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
404 Page | Saransh | 2,666 Kb |
NeeilTimer | Neeilan | 2,836 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!