Janet-Lu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .out{ | |
| width:100%; | |
| background:#f06; | |
| } | |
| .row{ | |
| width:80%; | |
| margin:0 auto; | |
| } |
Janet-Lu
/ dabblet.css
Created
August 24, 2016 09:41
— forked from csssecrets/dabblet.css
Animation along a circular path - Solution 2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Animation along a circular path - Solution 2 | |
| */ | |
| @keyframes spin { | |
| /*from { | |
| transform: translate(50%, 50px) | |
| rotate(0turn) | |
| translate(-50%, -50px) | |
| translate(50%,50%) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @keyframes spin { | |
| to { transform: rotate(1turn); } /* 0-360deg(0-1turn) */ | |
| } | |
| .a1 { | |
| animation: spin 3s infinite linear; | |
| transform-origin: 50% 100px; /* 150px = path radius */ | |
| } | |
| .a2 > img { |
Janet-Lu
/ dabblet.css
Last active
August 24, 2016 06:19
— forked from csssecrets/dabblet.css
Smooth state animations
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Smooth state animations | |
| * Photo credits: https://www.flickr.com/photos/employtheskinnyboy/3904743709 | |
| */ | |
| @keyframes panoramic { | |
| to { background-position: 100% 0; } | |
| } | |
| .panoramic { |
Janet-Lu
/ dabblet.css
Created
August 24, 2016 06:08
— forked from csssecrets/dabblet.css
Typing animation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Typing animation | |
| */ | |
| @keyframes typing { | |
| from { width: 0 } | |
| } | |
| @keyframes caret { | |
| 50% { border-right-color: transparent; } |
Janet-Lu
/ dabblet.css
Last active
August 24, 2016 06:07
— forked from csssecrets/dabblet.css
Blinking
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Blinking | |
| */ | |
| p { | |
| padding: 1em; | |
| background: gold; | |
| } | |
| @keyframes blink-smooth { to { color: transparent } } |
Janet-Lu
/ dabblet.css
Created
August 24, 2016 03:53
— forked from csssecrets/dabblet.css
Frame-by-frame animations
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Frame-by-frame animations | |
| */ | |
| @keyframes loader { | |
| to { background-position: 800px 0; } | |
| } | |
| .loader { | |
| width: 100px; height: 100px; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*input:not(:focus) + .callout { | |
| transform: scale(0); /* hid | |
| } | |
| .callout { | |
| transition: .5s; | |
| transform-origin: 1.4em 0em; | |
| }*/ | |
| /******************************************************/ |
Janet-Lu
/ dabblet.css
Last active
August 24, 2016 03:08
— forked from csssecrets/dabblet.css
Bouncing animation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Bouncing animation | |
| */ | |
| @keyframes bounce { | |
| 60%, 80%, 90%, 95%, to { | |
| transform: translateY(400px); | |
| animation-timing-function: ease; | |
| } | |
| 70% { transform: translateY(300px); } |
Janet-Lu
/ dabblet.css
Created
August 23, 2016 10:15
— forked from csssecrets/dabblet.css
Sticky footer with fixed height
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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 } |
NewerOlder