Welcome, weary internet traveller. You’ve stumbled onto a great slice of the internet.

Keyframes is a creative community. Share your #wip, get #feedback, find inspiration, and chat with people who make things. It is a bunker from the rest of the garbage internet. No popularity contests here. No circle jerks. No regular jerks. Just a wholesome place to shoot the shit and be real about what you’re making.

You can post in public, or private (with a Plus account). Use it to improve your work, or just feel good about creating things again.

Come on in! We hope you enjoy your stay.

Register here for a very fun time ✨️

Or log in if you’re returning. (Welcome back!)

All posts tagged “css”

Neat code for a ripple animation of SVG lines
// postcss.config.js module.exports = { plugins: [ require('postcss-cssnext'), require('postcss-for'), require('postcss-math'), require('postcss-simple-vars'), ] } // style.css @keyframes bump { 8%, 11% { transform: translate(0, 0); } 10% { transform: translate(-.333em, -.333em); } } @for $i from 1 to 30 { .line-$i { transform-origin: bottom left; animation: bump 10s cubic-bezier(.67,-0.13,.47,1.22) infinite; animation-delay: resolve(0.1s * $i / 3); } }

Scrollscreen a Vanilla JavaScript Custom Scrollbar Solution

Scrollscreen positions a layer precisely on top of the browser default scrollbar allowing custom styles. I know, I know, there are some funky -webkit-...

Scrollscreen positions a layer precisely on top of the browser default scrollbar allowing custom styles.

Tested both MacOS (with and without MacOS auto-hiding scrollbars) and Windows on browsers IE11, Edge, Firefox, Chrome, Safari, iOS (with and without momentum scrolling).

Correctly deals with text direction.

Enjoy!
https://github.com/rikschennink/scrollscreen

voyagerstudio/saturnfive

A design system springboard with three distinct levels of fidelity and opinionated code. - voyagerstudio/saturnfive

Saturn V is a boilerplate/starting place for any web-app/site that's using SCSS to style it's pages. I've been using bits and pieces of this for a couple years now on various projects and wanted to bundle it all together as a sort of springboard for new projects. The readme hopefully explains this a bit better.

The goal is to make a useful straight-forward boilerplate for new projects built with SCSS, especially for projects that intend on utilizing components and documented design patterns.

1. Is this genuinely helpful for new projects?
2. How can I communicate how this works and what the benefits of it are _better_?

I made this CSS-styled radio button form a while ago, and recently decided to add some CSS-animated emoji to it.

Here it the link to the actual code if you want to play with it: https://codepen.io/ryanrushing/full/PNyKJM/

I'm trying to make the interaction feel friendly and approachable, especially for kids.

Does the direction of the selected radio-button plus the emoji work well together? (They are moving on two axes, and I'm wondering if that feels jarring.)

Also I keep shortening the milliseconds of the animation to make it snappier. Does it feel too slow?

SVG panther - animated

Messing around with code + art. Illustration made in Illustrator then generated/saved out to SVG, SVG optimised for web, animated with CSS and then fa...

I have been torn between dedicating my time to art outside of work and learning code and cannot dedicate time to both enough after a full time job so i have decided to try to combine my love for drawing, art etc with code and this is my first stabe in a while. I am hoping to make much more and improve my code as I go along.
Yes this uses SVG, lots of code, generated from illustrator, cleaned up to work on web based on one of my drawings and then I animate it mostly with CSS with a cheap each in jQuery.
If anyone can help me improve the jquery or even refactor to vanilla i'd be grateful as I am struggling to do anything like that in vanilla like I can in jQuery!

jQuery(document).ready(function($) {
	$("path")
		.delay(500)
		.each(function(i) {
			$(this).delay(10 * i).animate({opacity: "1" }, 1000);
		});
});

I'd be interested in hearing your thoughts guys and gals :)
https://codepen.io/pixelspencil/full/yxooVE

P.S. for anyone interested you can view...

Continue →

Exploring a little hover animation on the Keyframes mark.

I'm trying to infuse some playfulness into the Desktop app when you hover over the main logomark.

I would love to know what folks thing of this interaction. Is it annoying? Does it work? Is it too much?

Putting some color in a pretty neutral theme.

We're automatically generating some documentation. I'm trying to put some fun into all this neutral theme when hovering the logo. I'm using a CSS filter so it varies the different colors independently of the logo used.

Do you have any better ideas that would scale to different types of logos?