HTMLとCSSだけで作成したアニメーションを随時公開します。「実用的なもの」から「使いどころはよくわからないけど見ていて楽しいもの」まで、幅広く作成したいと思います。何かの参考にしていただけると嬉しいです。コードは自由にコピペして使ってください。
ついでにTwitterアカウントをフォローしてくれたら幸せです。
99.99秒までカウントできるタイマーです。わかりやすいようにkeyframesの中は1/10ずつ細分化してますが、同色が連続するところはうまく省略してしまうのが良いと思います。
<ul class="anime-008">
<li class="digit digit_1">
<div class="math_r math_1"></div>
<div class="math_r math_2"></div>
<div class="math_r math_3"></div>
<div class="math_c math_4"></div>
<div class="math_c math_5"></div>
<div class="math_c math_6"></div>
<div class="math_c math_7"></div>
</li>
<li class="digit digit_2">
<div class="math_r math_1"></div>
<div class="math_r math_2"></div>
<div class="math_r math_3"></div>
<div class="math_c math_4"></div>
<div class="math_c math_5"></div>
<div class="math_c math_6"></div>
<div class="math_c math_7"></div>
</li>
<li class="digit digit_3">
<div class="math_r math_1"></div>
<div class="math_r math_2"></div>
<div class="math_r math_3"></div>
<div class="math_c math_4"></div>
<div class="math_c math_5"></div>
<div class="math_c math_6"></div>
<div class="math_c math_7"></div>
</li>
<li class="digit digit_4">
<div class="math_r math_1"></div>
<div class="math_r math_2"></div>
<div class="math_r math_3"></div>
<div class="math_c math_4"></div>
<div class="math_c math_5"></div>
<div class="math_c math_6"></div>
<div class="math_c math_7"></div>
</li>
</ul>
.anime-008{
display : flex ;
justify-content : center ;
align-items : flex-end ;
width : 140px ;
height: 50px ;
list-style : none ;
margin :0 ;
padding : 0 ;
}
.digit_1,
.digit_2{
position : relative ;
width : 30px ;
height : 50px ;
}
.digit_3,
.digit_4{
position : relative ;
width : 20px ;
height : 30px ;
}
.digit_1{
margin : 0 6px 0 0 ;
}
.digit_3{
margin : 0 6px 0 12px ;
}
.math_r{
position : absolute ;
background : #FF3050 ;
width : 70% ;
height : 4px ;
border-radius : 2px ;
}
.math_c{
position : absolute ;
background : #FF3050 ;
width : 4px ;
height : 40% ;
border-radius : 2px ;
}
.math_1{
top : 0 ;
left : 0 ;
right : 0 ;
margin : 0 auto ;
}
.math_2{
top : 0 ;
left : 0 ;
right : 0 ;
bottom : 0 ;
margin : auto ;
}
.math_3{
bottom : 0 ;
left : 0 ;
right : 0 ;
margin : 0 auto ;
}
.math_4{
top : 5% ;
left : 0 ;
}
.math_5{
bottom : 5% ;
left : 0 ;
}
.math_6{
top : 5% ;
right :0 ;
}
.math_7{
bottom : 5% ;
right : 0 ;
}
.math_r, .math_c{
animation-timing-function : linear ;
animation-iteration-count : infinite ;
}
.math_1{
animation-name : degit3_1 ;
}
.math_2{
animation-name : degit3_2 ;
}
.math_3{
animation-name : degit3_3 ;
}
.math_4{
animation-name : degit3_4 ;
}
.math_5{
animation-name : degit3_5 ;
}
.math_6{
animation-name : degit3_6 ;
}
.math_7{
animation-name : degit3_7 ;
}
.digit_1 .math_r, .digit_1 .math_c{
animation-duration : 100s ;
}
.digit_2 .math_r, .digit_2 .math_c{
animation-duration : 10s ;
}
.digit_3 .math_r, .digit_3 .math_c{
animation-duration : 1s ;
}
.digit_4 .math_r, .digit_4 .math_c{
animation-duration : 0.1s ;
}
@keyframes degit3_1 {
0% {background : #FF3050 ;}
9.9%{background : #FF3050 ;}
10% {background : #eee ;}
19.9%{background : #eee ;}
20% {background : #FF3050 ;}
29.9%{background : #FF3050 ;}
30% {background : #FF3050 ;}
39.9%{background : #FF3050 ;}
40% {background : #eee ;}
49.9%{background : #eee ;}
50% {background : #FF3050 ;}
59.9%{background : #FF3050 ;}
60% {background : #FF3050 ;}
69.9%{background : #FF3050 ;}
70% {background : #FF3050 ;}
79.9%{background : #FF3050 ;}
80% {background : #FF3050 ;}
89.9%{background : #FF3050 ;}
90% {background : #FF3050 ;}
99.9%{background : #FF3050 ;}
100%{background : #FF3050 ;}
}
@keyframes degit3_2 {
0% {background : #eee ;}
9.9%{background : #eee ;}
10% {background : #eee ;}
19.9%{background : #eee ;}
20% {background : #FF3050 ;}
29.9%{background : #FF3050 ;}
30% {background : #FF3050 ;}
39.9%{background : #FF3050 ;}
40% {background : #FF3050 ;}
49.9%{background : #FF3050 ;}
50% {background : #FF3050 ;}
59.9%{background : #FF3050 ;}
60% {background : #FF3050 ;}
69.9%{background : #FF3050 ;}
70% {background : #eee ;}
79.9%{background : #eee ;}
80% {background : #FF3050 ;}
89.9%{background : #FF3050 ;}
90% {background : #FF3050 ;}
99.9%{background : #FF3050 ;}
100%{background : #eee ;}
}
@keyframes degit3_3 {
0% {background : #FF3050 ;}
9.9%{background : #FF3050 ;}
10% {background : #eee ;}
19.9%{background : #eee ;}
20% {background : #FF3050 ;}
29.9%{background : #FF3050 ;}
30% {background : #FF3050 ;}
39.9%{background : #FF3050 ;}
40% {background : #eee ;}
49.9%{background : #eee ;}
50% {background : #FF3050 ;}
59.9%{background : #FF3050 ;}
60% {background : #FF3050 ;}
69.9%{background : #FF3050 ;}
70% {background : #eee ;}
79.9%{background : #eee ;}
80% {background : #FF3050 ;}
89.9%{background : #FF3050 ;}
90% {background : #FF3050 ;}
99.9%{background : #FF3050 ;}
100%{background : #FF3050 ;}
}
@keyframes degit3_4 {
0% {background : #FF3050 ;}
9.9%{background : #FF3050 ;}
10% {background : #eee ;}
19.9%{background : #eee ;}
20% {background : #eee ;}
29.9%{background : #eee ;}
30% {background : #eee ;}
39.9%{background : #eee ;}
40% {background : #FF3050 ;}
49.9%{background : #FF3050 ;}
50% {background : #FF3050 ;}
59.9%{background : #FF3050 ;}
60% {background : #FF3050 ;}
69.9%{background : #FF3050 ;}
70% {background : #FF3050 ;}
79.9%{background : #FF3050 ;}
80% {background : #FF3050 ;}
89.9%{background : #FF3050 ;}
90% {background : #FF3050 ;}
99.9%{background : #FF3050 ;}
100%{background : #FF3050 ;}
}
@keyframes degit3_5 {
0% {background : #FF3050 ;}
9.9%{background : #FF3050 ;}
10% {background : #eee ;}
19.9%{background : #eee ;}
20% {background : #FF3050 ;}
29.9%{background : #FF3050 ;}
30% {background : #eee ;}
39.9%{background : #eee ;}
40% {background : #eee ;}
49.9%{background : #eee ;}
50% {background : #eee ;}
59.9%{background : #eee ;}
60% {background : #FF3050 ;}
69.9%{background : #FF3050 ;}
70% {background : #eee ;}
79.9%{background : #eee ;}
80% {background : #FF3050 ;}
89.9%{background : #FF3050 ;}
90% {background : #eee ;}
99.9%{background : #eee ;}
100%{background : #FF3050 ;}
}
@keyframes degit3_6 {
0% {background : #FF3050 ;}
9.9%{background : #FF3050 ;}
10% {background : #FF3050 ;}
19.9%{background : #FF3050 ;}
20% {background : #FF3050 ;}
29.9%{background : #FF3050 ;}
30% {background : #FF3050 ;}
39.9%{background : #FF3050 ;}
40% {background : #FF3050 ;}
49.9%{background : #FF3050 ;}
50% {background : #eee ;}
59.9%{background : #eee ;}
60% {background : #eee ;}
69.9%{background : #eee ;}
70% {background : #FF3050 ;}
79.9%{background : #FF3050 ;}
80% {background : #FF3050 ;}
89.9%{background : #FF3050 ;}
90% {background : #FF3050 ;}
99.9%{background : #FF3050 ;}
100%{background : #FF3050 ;}
}
@keyframes degit3_7 {
0% {background : #FF3050 ;}
9.9%{background : #FF3050 ;}
10% {background : #FF3050 ;}
19.9%{background : #FF3050 ;}
20% {background : #eee ;}
29.9%{background : #eee ;}
30% {background : #FF3050 ;}
39.9%{background : #FF3050 ;}
40% {background : #FF3050 ;}
49.9%{background : #FF3050 ;}
50% {background : #FF3050 ;}
59.9%{background : #FF3050 ;}
60% {background : #FF3050 ;}
69.9%{background : #FF3050 ;}
70% {background : #FF3050 ;}
79.9%{background : #FF3050 ;}
80% {background : #FF3050 ;}
89.9%{background : #FF3050 ;}
90% {background : #FF3050 ;}
99.9%{background : #FF3050 ;}
100%{background : #FF3050 ;}
}