kalungat mykelsoft

🎯

Focusing

mykelsoft / dabblet.css

Created October 25, 2018 14:42 — forked from csssecrets/dabblet.css

Animation along a circular path - Solution 1

	/**
	* Animation along a circular path - Solution 1
	*/

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

	.avatar {
	animation: spin 3s infinite linear;

mykelsoft / dabblet.css

Created October 25, 2018 14:41 — forked from csssecrets/dabblet.css

Smooth state animations

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

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

	.panoramic {

mykelsoft / dabblet.css

Created October 25, 2018 14:40 — forked from csssecrets/dabblet.css

Typing animation

	/**
	* Typing animation
	*/

	@keyframes typing {
	from { width: 0 }
	}

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

mykelsoft / dabblet.css

Created October 25, 2018 14:37 — forked from csssecrets/dabblet.css

Blinking

	/**
	* Blinking
	*/

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

	p {
	padding: 1em;
	background: gold;

mykelsoft / dabblet.css

Created October 25, 2018 14:36 — forked from csssecrets/dabblet.css

Frame-by-frame animations

mykelsoft / dabblet.css

Last active October 25, 2018 14:35 — forked from csssecrets/dabblet.css

Elastic transitions

	/**
	* Elastic transitions
	*/

	input:not(:focus) + .callout:not(:hover) {
	transform: scale(0);
	transition: .25s transform;
	}

	.callout {

mykelsoft / dabblet.css

Created October 25, 2018 14:35 — forked from csssecrets/dabblet.css

Bouncing animation

	/**
	* Bouncing animation
	*/

	@keyframes bounce {
	60%, 80%, to {
	transform: translateY(400px);
	animation-timing-function: ease;
	}
	70% { transform: translateY(300px); }

mykelsoft / dabblet.css

Created October 25, 2018 14:33 — forked from csssecrets/dabblet.css

Sticky footer with flexible height

	/**
	* Sticky footer with flexible height
	*/

	body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	}

mykelsoft / dabblet.css

Created October 25, 2018 14:33 — forked from csssecrets/dabblet.css

Sticky footer with fixed height

	/**
	* Sticky footer with fixed height
	*/

	main {
	min-height: calc(100vh - 5em - 7em);
	}

	/* Toggle checkbox to alternate between short/long content */
	#contents:checked ~ p { display: none }

mykelsoft / dabblet.css

Created October 25, 2018 14:24 — forked from csssecrets/dabblet.css

Vertical centering - absolute positioning method

	/**
	* Vertical centering - absolute positioning method
	*/

	main {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);