roachhd

/**
 * RGB plane for R=255
 */

roachhd

/**
 * Blinking animations
 */

@keyframes blink-smooth { to { opacity: 0 } }
@keyframes blink { 50% { opacity: 0 } }

p {
	animation: blink-smooth .3s 10 alternate;
	background: yellow;

roachhd

/**
 * Bouncy bouncy
 */

@keyframes foo {
	60%, 80%, to { margin-top: 400px; }
	70% { margin-top: 330px; animation-timing-function: ease-in; }
	90% { margin-top: 370px; animation-timing-function: ease-in; }
}

roachhd

/**
 * animation-fill-mode with non-integer animation-iteration-count
 */

@keyframes foo { to { background: black }}

body {
	animation: foo 3s .4 both linear;
}

roachhd

/**
 * Border clipping with border-image
 * Support: Chrome, Opera, Safari, Firefox. Cannot get it to work in IE11, even though it supports border-image…
 * Note: In CSS Backgrounds & Borders 4, there will be a property to clip borders (likely called border-clip). Until then though…
 * Author: Lea Verou
 */

div {
	border-top: .2em solid; /* Sets the thickness, also serves as fallback when no border-image */
	border-image: 100% 0 0 linear-gradient(90deg, currentColor 5em, transparent 0); /* 5em is the width of clipped border */

roachhd

/**
 * (C)Leanest CSS spinner ever
 */

@keyframes spin {
	to { transform: rotate(1turn); }
}

.progress {
	position: relative;

roachhd

Neutrons loop

A loop version of my Neutrons experiment (http://ayamflow.fr/labs/canvas/Neutrons/) made for the awwward contest

A Pen by ayamflow on CodePen.

License.

roachhd

GSAP JS Bezier: Cubic

CSSPlugin + BezierPlugin fun powered by:
http://www.greensock.com/gsap-js/

BezierPlugin Docs: http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

roachhd

GSAP JS Bezier: Cubic

CSSPlugin + BezierPlugin fun powered by:
http://www.greensock.com/gsap-js/

BezierPlugin Docs: http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

roachhd

<div class="box red"></div>
<div class="box blue"></div>
<div class="box red"></div>
<div class="box blue"></div>
<div class="box red"></div>
<div class="box blue"></div>
<div class="box red"></div>
<div class="box blue"></div>