clackers – Thingography.com
https://thingography.com
More than a Photo Gallery
Thu, 13 Feb 2025 21:10:44 +0000
en-US
hourly
1
-
Clackers CSS Animation
https://thingography.com/css-clackers/
Sun, 18 Feb 2018 18:48:45 +0000
http://thingography.com/my-things/?p=65
.example-1, .example-2, .example-3 {
margin: 2em auto;
width: 550px;
height: 550px;
position: relative;
}
.clackers-comment {
padding: 0.5em;
border: 2px ridge #000000;
margin: 0.5em auto 1em auto;
width: 100%;
font-size: 1.2em;
color: #F2F2F2;
text-align: center;
line-height: 1.3em;
background-color: #666666;
}
#last {margin-bottom: 80px;}
.db1, .db2 {
width: 150px;
height: 1100px;
top: 50%;
left: 50%;
position: absolute;
margin-top: -550px;
margin-left: -75px;
}
.shaft {
border: 1px solid #000000;
width: 10px;
height: 250px;
top: 50%;
left: 50%;
position: absolute;
margin-top: -125px;
margin-left: -5px;
background-color: #FF3300;
z-index: 2;
}
.balla1, .balla2, .ballb1, .ballb2 {
width: 150px;
height: 150px;
top: 50%;
left: 50%;
position: absolute;
background-color: #FF3300; /* Ball default RED Color */
border-radius: 50%;
border: 1px solid #000000;
}
.db2 {animation: spin2 5s linear infinite;}
.db1 {animation: spin 5s linear infinite;}
.balla1, .ballb1 {
margin-top: -275px;
margin-left: -75px;
}
.balla2, .ballb2 {
margin-top: 125px;
margin-left: -75px;
}
/* ====== END FIXED ===== */
/* ============== Example-2 ============== */
.example-2 .balla1, .example-2 .ballb1 {animation: color 2.5s linear infinite;}
.example-2 .balla2, .example-2 .ballb2 {animation: color2 2.5s linear infinite;}
/* ======= Example-3 ========== */
.example-3 .db1 {animation: bounce .625s linear infinite;}
.example-3 .db2 {animation:bounce2 .625s linear infinite;}
/* ============= Animation Keyframes ============= */
@keyframes spin {
0% { transform: rotateZ( 0deg);}
100% { transform: rotateZ(720deg);}
}
@keyframes spin2 {
0% { transform: rotateZ( 0deg);}
100% { transform: rotateZ(-720deg);}
}
@keyframes color {
0% {background-color: red; opacity: 1}
25% {background-color: red; opacity: 1}
25.01%{background-color: blue; opacity: 0.5}
25.2% {background-color: blue; opacity: 1}
75% {background-color: blue; opacity: 1}
75.01%{background-color: red; opacity: 0.5}
75.2% {background-color: red; opacity: 1}
100% {background-color: red; opacity: 1}
}
@keyframes color2 {
0% {background-color: blue; opacity: 1}
25% {background-color: blue; opacity: 1}
25.01%{background-color: red; opacity: 0.5}
25.2% {background-color: red; opacity: 1}
75% {background-color: red; opacity: 1}
75.01%{background-color: blue; opacity: 0.5}
75.2% {background-color: blue; opacity: 1}
100% {background-color: blue; opacity: 1}
}
@keyframes bounce {
0% { transform: rotateZ( -21.6deg);}
50% { transform: rotateZ( -68.5deg);}
100% { transform: rotateZ( -21.6deg);}
}
@keyframes bounce2 {
0% {transform: rotateZ( 21.6deg);}
50% {transform: rotateZ( 68.5deg);}
100% {transform: rotateZ( 21.6deg);}
}
]]>
Here are three versions of this illusion, reminiscent of the Clackers toy.