csssecrets

/**
 * Diamond images — via transforms
 */

.diamond {
	width: 250px;
	height: 250px;
	transform: rotate(45deg);
	overflow: hidden;
	margin: 100px;

csssecrets

/**
 * Scrolling hints
 */

ul {
	display: inline-block;
	overflow: auto;
	width: 7.2em;
	height: 7em;
	border: 1px solid silver;

csssecrets

/**
 * Extending the hit area — with generated content
 */

button {
	position: relative;
	padding: .3em .5em;
	background: #58a;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.3);

csssecrets

/**
 * Interactive image comparison - with CSS resize
 */

.image-slider {
	position:relative;
	display: inline-block;
}

.image-slider > div {

csssecrets

/**
 * Hyphenation
 */

width: 8.7em;
font: 180%/1.4 Baskerville, serif;
text-align: justify;
hyphens: auto;

csssecrets

/**
 * Frame-by-frame animations
 */

@keyframes loader {
	to { background-position: -800px 0; }
}

.loader {
	width: 100px; height: 100px;

csssecrets

/**
 * Blinking
 */

@keyframes blink-1 { 50% { color: transparent } }
@keyframes blink-2 { to { color: transparent } }

p {
	padding: 1em;
	background: gold;

csssecrets

/**
 * Typing animation
 */

@keyframes typing {
	from { width: 0 }
}

@keyframes caret {
	50% { border-right-color: transparent; }

csssecrets

/**
 * Smooth state animations
 * Photo credits: https://www.flickr.com/photos/employtheskinnyboy/3904743709
 */

@keyframes panoramic {
	to { background-position: 100% 0; }
}

.panoramic {

csssecrets

/**
 * Animation along a circular path - Solution 1
 */
 
@keyframes spin {
	to { transform: rotate(1turn); }
}

.avatar {
	animation: spin 3s infinite linear;