Skip to content

Instantly share code, notes, and snippets.

@csssecrets
csssecrets / dabblet.css
Last active March 15, 2023 07:41
Bouncing animation
/**
* Bouncing animation
*/
@keyframes bounce {
60%, 80%, to {
transform: translateY(400px);
animation-timing-function: ease;
}
70% { transform: translateY(300px); }
@csssecrets
csssecrets / dabblet.css
Last active January 22, 2022 14:50
Elastic transitions
/**
* Elastic transitions
*/
input:not(:focus) + .callout:not(:hover) {
transform: scale(0);
transition: .25s transform;
}
.callout {
@csssecrets
csssecrets / dabblet.css
Created February 22, 2015 04:16
Elastic color
/**
* Elastic color
*/
html {
background: rgb(100%, 0%, 40%);
transition: 1s cubic-bezier(.25,.1,.2,3);
}
@csssecrets
csssecrets / dabblet.css
Created January 6, 2016 14:42
Scrolling hints
/**
* Scrolling hints
*/
ul {
display: inline-block;
overflow: auto;
width: 7.2em;
height: 7em;
border: 1px solid silver;
@csssecrets
csssecrets / dabblet.css
Created March 4, 2016 23:34
box-shadow removes slider track in Chrome
/**
* box-shadow removes slider track in Chrome
*/
input {
box-shadow: 0 0 5px red;
}