Key Press SVG illustration with CSS animation

Developer
Rachel Nabors
Size
4,242 Kb
Views
56,672
  1. Key Press SVG illustration with CSS animation Previews
  2. Key Press SVG illustration with CSS animation HTML Codes
  3. Key Press SVG illustration with CSS animation CSS Codes

How do I make an key press svg illustration with css animation?

Working on a series of animations for an article. We figured these would be lighter than gifs :). What is a key press svg illustration with css animation? How do you make a key press svg illustration with css animation? This script and codes were developed by Rachel Nabors on 14 June 2022, Tuesday.

Key Press SVG illustration with CSS animation Previews
IQ Test

Key Press SVG illustration with CSS animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Key Press SVG illustration with CSS animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .illustration { width: 100%; max-width: 60vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.illo_keypress .illo_wrapper { padding-top: calc(85/80 * 100%);
}
.illo_component { position: absolute; top: 0; left: 0;
}
.illo_keypress_bg-keys { width: calc(68/80 * 100%); top: calc(36/85 * 100%); left: calc(12/80 * 100%);
}
.illo_keypress_fg-keys { width: calc(34/80 * 100%); top: calc(55/85 * 100%); left: calc(1/80 * 100%);
}
.illo_keypress_finger { animation: finger-of-doom 7s ease-in infinite; width: calc(26/80 * 100%); top: calc(1/85 * 100%); left: calc(49/80 * 100%);
}
.illo_keypress_pressed-key { animation: key-submission 7s ease-in infinite; fill:#DA98FE; width: calc(39/80 * 100%); top: calc(47/85 * 100%); left: calc(23/80 * 100%);
}
/* Animation Times */
@keyframes finger-of-doom { 10%, 50% { transform: translate(-45%, 45%); } 60%, 100% { animation-timing-function: ease-out; transform: translate(0, 0); }
}
@keyframes key-submission { 7% { transform: translate(0, 0); } 10%, 50% { fill:cyan; transform: translate(0, 5%); } 57%, 100% { animation-timing-function: ease-out; fill:#DA98FE; transform: translate(0, 0); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="illustration illo_keypress" role="presentation"> <div class="illo_wrapper"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 30" class="illo_component illo_keypress_bg-keys"><path d="M11.7 18.5v3c-1.3-1.3-.7-2.8-.9-4.2C8.3 13.8 5 11 2.2 7.6c.1 1.5.5 2.9.3 4.4-1.1-1.4-1-3-1.2-4.7-.2 0-.5-.2-.2-.8C8.2 4.4 15.5 2.3 23 1c4 2.4 7.3 5.8 11 8.5-.1 2.4-.2 4.7-.3 7-.2.2-.4.2-.8 0v-5.8c-7.3 2.1-14.2 4.9-21.2 7.8zm0-1.1c6.5-3.2 13.2-5.7 20.2-7.8-3.5-2.7-6.8-5.5-10.4-8C15.3 3.9 8.8 5 2.3 7.1c1.3.7 1.9 1.9 2.9 2.7 1.7 1.4 3.4 2.9 4.8 4.6.7.9 1.6 1.7 1.7 3zM51.8 29.2c-.4-1.2-1-2.3-1-3.4 0-1.5-1.3-2.2-2.1-3.2-1.4-1.7-2.8-3.4-4.5-4.9-2-1.8-4-3.4-6-5.2-.3-.2-.5-.5-.9-.9v5.3c-.3.3-.5.2-.8.1v-5.8c.6-.8 1.6-.9 2.5-1.1 2.4-.7 4.9-1.1 7.2-1.9 1.8-.7 3.7-1.1 5.6-1.6.3-.1.5-.1.8 0 5.5 2.8 10.3 6.6 15 10.5.1 2.2-.2 4.3-.5 6.5-.7-1.1-.9-3.4-.5-5.2-4.9 2.2-9.9 4.2-15 6.2.4 1.5.6 3 .2 4.6zM38.1 11.4C43 15.2 47.6 18.9 51 24c5.3-2.3 10.5-4.6 16.1-6.2-4.4-4.5-9.8-7.2-14.8-10.5-4.8 1.4-9.4 3-14.2 4.1z"/><path d="M19.3 6.8h-1.8c.8 1 1.6 2 2.3 3v.6c-.1.1-.3.2-.6.4h-.4c-1.1-.9-1.6-2.2-2.7-3-.2.4 0 1-.6 1.3-.5-.2-.6-.6-.6-1 0-.5-.1-.9-.2-1.3-.2-.9.2-1.3 1.1-1.1.7.1 1.3.2 1.9.5.5.1.9.3 1.6.6zM55.8 13c.2 1-1.2 3.5-2.1 3.7-.6-.7.1-1.3.2-2-1.4.5-2.8 1.1-4.3 1.5-.2-.1-.4-.1-.6-.4.6-1 1.9-.9 2.8-1.6h-.7c-.4-.2-.5-.5-.4-.8.2-.4.7-.5 1.1-.4.9.2 1.9.1 2.8.1.3 0 .7-.3 1.2-.1z"/></svg>
<svg class="illo_component illo_keypress_pressed-key" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 30"><style>.st0{fill:#FFFFFF;} </style><path class="st0" d="M2 9.4l22.5-7.9 13.3 14.6-.2 4.7-24.4 8.5L1.5 13.8z"/><path class="st1" d="M2.1 10.1c.1 1.3.2 2.4.2 3.5-1.7-1-1.7-3.1-.7-4.5.3-.4 1-.4 1.5-.6 6.1-2.3 12.1-4.6 18.2-6.9.5-.2 1-.3 1.4-.4 2-.7 3.3.8 4.4 1.9 3.1 3.3 6 6.8 9 10.2.7.8 1.4 1.7 2 2.5.2.2.1.6.1 1 0 1.1 0 2.2-.1 3.3 0 .3-.4.5-.6.7-.1-.2-.2-.5-.2-.7v-2.5c0-.1-.3-.3-.4-.3-5.2 1.9-10.5 3.8-15.7 5.7L14 25.7c-.2.1-.4.4-.4.6 0 .9.2 1.8.2 2.7 0 .3-.3.6-.5.9-.2-.2-.6-.5-.7-.7-.1-1.3 0-2.7-.1-4 0-.5-.5-.9-.8-1.4l-6.9-9.6c-.9-1.4-1.7-2.7-2.7-4.1zm22.4-8.6c-.5.2-.8.3-1.2.5-6.7 2.5-13.3 5-20 7.5-.1 0-.2.5-.1.6 1.9 2.5 3.9 4.8 5.7 7.3 1.6 2.3 2.8 4.8 4.2 7.2.1.1.5.2.7.2 1.2-.5 2.4-1.2 3.6-1.6 6.4-2.2 12.7-4.4 19.1-6.6.6-.2.6-.4.2-.8-.7-.7-1.3-1.4-1.9-2.1C31.5 9.8 28.3 6 25 2.1c-.2-.2-.3-.4-.5-.6z"/><path class="st1" d="M22.5 17.9c-1.3-.3-2.3-.4-3.3-.7-.2-.1-.6-.7-.5-.8.2-.3.6-.5 1-.6.2-.1.4.1.6.1h.9c-.2-.3-.3-.6-.5-.8-.9-1.1-1.9-2.2-2.9-3.3-.2-.2-.1-.6-.2-.9.3 0 .7 0 .9.1 1.2 1.2 2.4 2.4 3.5 3.6.3.3.5.7.9 0 .1-.2.5-.3.8-.4.1.3.3.6.3.9-.1.7-.1 1.4-.4 2-.2.4-.8.6-1.1.8z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 30" class="illo_component illo_keypress_fg-keys"><style>.st0{fill:#FFFFFF;}</style><path class="st0" d="M1.5 10l.8 7.5s11.3 12 11.6 11.9 19.6-8 19.6-8l-.5-4.5L20.3 1.7 1.5 10z"/><path d="M14.1 28.8c-.2-.9-.5-1.7-.7-2.6-.1-.3-.4-.5-.5-.7-.1-.4-.2-.8-.5-1.1l-6.3-8.7c-1.2-1.7-2.6-3.3-4-4.8.1.7.3 1.5.4 2.2.1.8.3 1.5.3 2.3 0 .8-.1 1.6-.2 2.4-.8-.9-.9-1.8-1-2.8-.2-1.7-.3-3.5-.5-5.2 0 0-.1 0-.1-.1v-.1c.2-.1.4-.2.6-.4 0 0 0-.1-.1-.1.3-.2.6-.3.9-.5.2-.1.4-.1.7-.2 2.2-1 4.3-2 6.5-3 1.5-.7 3.1-1.4 4.7-2.1 1.7-.6 3.4-1.3 5.1-2.1.1-.1.3-.1.5-.2 1.1.5 2 1.2 2.9 2.2 1.5 1.7 3 3.4 4.4 5.1 1.6 1.9 3.2 3.9 4.8 5.9.2.2.4.5.6.7.8.7.9 1.8.9 2.7.1 1.1 0 2.1 0 3.4-1.1-.9-.6-2-.9-2.8-5.9 2.5-11.9 5.1-18 7.7-.1.9-.3 1.9-.5 2.9.1 0 0 0 0 0zm6.3-26.7C14.3 4.6 8.5 7.7 2.3 9.8c.5.4 1 .9 1.6 1.4 2.5 2.4 4.7 5.1 6.6 8 1.1 1.6 2.3 3.2 3.4 4.8.1.1.3.2.6.4 6-2.5 12-5 18.2-7.6-3-3.6-5.8-7.1-8.7-10.7-.1.3-.1.4-.1.3-.9-1.6-2.2-3-3.5-4.3z"/><path d="M14.7 13.4c1.8-.9 3.8-1.8 5.7-2.7.2-.1.6-.1.7.1.1.1.1.5 0 .7-.1.3-.4.5-.7.6-1.6.8-3.1 1.5-4.7 2.3-.3.2-.6.3-1.1.6.9-.1 1.7-.2 2.5-.3.1.2.3.3.6.7-.4.3-.7.7-1 .7-1.2 0-2.4 0-3.6-.1-.5 0-1.2.2-1.4-.9.6-.7 1.3-1.5 2-2.3.1-.1.5-.1.5-.1.4.2.4.5.5.7z"/></svg>
<svg class="illo_component illo_keypress_finger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.9 37.5"><defs><style>.cls-1 { fill: #fff; } .cls-2 { fill: #da98fe; }</style></defs><path class="cls-1" d="M9.4 0L.7 34.9l.7 1.6h1.9l6.7-2.8 3.4-2.6 3.4-3.4 2.9-4.9 4.8-14.3V6.2L9.4 0z"/><path class="cls-2" d="M9.8 0c-1 4.7-2 9.4-3.1 14.1s-2.5 9.3-3.7 14c-.6 2.2-1.1 4.4-1.5 6.7S1.8 36.3 3 36l1-.3c-2.4-1.9-1.8-4.2-1.2-6.6s.6-1.8.8-2.5c-.2 1.8-.4 3.8-.5 5.8s1.2 3 3 2.3a22.2 22.2 0 0 0 8.6-5.6 29.3 29.3 0 0 0 5.6-10c1.6-4.7 3-9.5 4.3-13.9.5 3.3-.4 6.9-1.6 10.5s-3.2 9.2-6.3 13a25 25 0 0 1-5.7 5.1 41.3 41.3 0 0 1-7.4 3.4c-2.5 1-4.1-.6-3.4-3.2q2.6-10 5.3-20C6.8 9.3 8.1 4.7 9.4 0z"/></svg> </div>
</div>
</body>
</html>

Key Press SVG illustration with CSS animation - Script Codes CSS Codes

.illustration { width: 100%; max-width: 60vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.illo_keypress .illo_wrapper { padding-top: calc(85/80 * 100%);
}
.illo_component { position: absolute; top: 0; left: 0;
}
.illo_keypress_bg-keys { width: calc(68/80 * 100%); top: calc(36/85 * 100%); left: calc(12/80 * 100%);
}
.illo_keypress_fg-keys { width: calc(34/80 * 100%); top: calc(55/85 * 100%); left: calc(1/80 * 100%);
}
.illo_keypress_finger { animation: finger-of-doom 7s ease-in infinite; width: calc(26/80 * 100%); top: calc(1/85 * 100%); left: calc(49/80 * 100%);
}
.illo_keypress_pressed-key { animation: key-submission 7s ease-in infinite; fill:#DA98FE; width: calc(39/80 * 100%); top: calc(47/85 * 100%); left: calc(23/80 * 100%);
}
/* Animation Times */
@keyframes finger-of-doom { 10%, 50% { transform: translate(-45%, 45%); } 60%, 100% { animation-timing-function: ease-out; transform: translate(0, 0); }
}
@keyframes key-submission { 7% { transform: translate(0, 0); } 10%, 50% { fill:cyan; transform: translate(0, 5%); } 57%, 100% { animation-timing-function: ease-out; fill:#DA98FE; transform: translate(0, 0); }
}
Key Press SVG illustration with CSS animation - Script Codes
Key Press SVG illustration with CSS animation - Script Codes
Home Page Home
Developer Rachel Nabors
Username rachelnabors
Uploaded June 14, 2022
Rating 3.5
Size 4,242 Kb
Views 56,672
Do you need developer help for Key Press SVG illustration with CSS animation?

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!

Rachel Nabors (rachelnabors) Script Codes
Name
Pure CSS Badge Logo
Walkcycle with music loop
Crisp lines at smaller sizes
Geek Badge
Text Clipping Sass mixin
Falling Down the Rabbit Hole
From walk to run
Spinner
Yarn Loader
Down the Hipster Rabbit Hole
Create amazing marketing copy with AI!

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!