HTMLとCSSだけで作成したアニメーションを随時公開します。「実用的なもの」から「使いどころはよくわからないけど見ていて楽しいもの」まで、幅広く作成したいと思います。何かの参考にしていただけると嬉しいです。コードは自由にコピペして使ってください。
ついでにTwitterアカウントをフォローしてくれたら幸せです。
チェックボックスのアニメーションです。フォームなどはスタイルあてないとかなり質素でダサくなってしまうので、僕はよくこういうの使ってフォームをカスタマイズします。
<input type="checkbox" id="check">
<label for="check" class="check1">Check</label>
<label for="check" class="check2">Check</label>
<label for="check" class="check3">Check</label>
.anime-011{
display : flex ;
flex-direction : column ;
justify-content : center ;
align-content : space-around ;
}
.check1{
display : inline-block ;
position : relative ;
height : 40px ;
line-height : 40px ;
margin : 0 ;
padding : 0 16px 0 32px ;
box-sizing : border-box ;
}
.check1::before{
content : "" ;
position : absolute ;
top : 0 ;
left : 8px ;
bottom : 0 ;
margin : auto 0 ;
width : 16px ;
height: 16px ;
box-sizing : border-box ;
border-radius : 2px ;
border : solid 1px #ccc ;
}
.check1::after{
content : "" ;
position : absolute ;
top : 16px ;
left : 8px ;
margin : 0 ;
width : 12px ;
height : 8px ;
}
.check2{
display : inline-block ;
position : relative ;
height : 40px ;
line-height : 40px ;
margin : 0 ;
padding : 0 16px 0 32px ;
border-radius : 20px ;
box-sizing : border-box ;
color : #333 ;
}
.check2::before{
content : "" ;
position : absolute ;
top : 0 ;
left : 8px ;
bottom : 0 ;
margin : auto 0 ;
width : 16px ;
height: 16px ;
box-sizing : border-box ;
border-radius : 2px ;
border : solid 1px #ccc ;
transition : 1s ;
}
.check2::after{
content : "" ;
position : absolute ;
top : 0 ;
bottom : 0 ;
left: 10px ;
margin : auto 0 ;
width : 12px ;
height : 12px ;
border-radius : 2px ;
background : #236ACB ;
transform : scale(0);
}
.check3{
display : inline-block ;
position : relative ;
height : 40px ;
line-height : 40px ;
margin : 0 ;
padding : 0 16px 0 32px ;
border-radius : 20px ;
box-sizing : border-box ;
color : #333 ;
}
.check3::before{
content : "" ;
position : absolute ;
top : 0 ;
left : 8px ;
bottom : 0 ;
margin : auto 0 ;
width : 16px ;
height: 16px ;
border-radius : 50% ;
box-sizing : border-box ;
background : #ddd ;
transition : .4s ;
}
.check3::before{
content : "" ;
position : absolute ;
top : 0 ;
left : 8px ;
bottom : 0 ;
margin : auto 0 ;
width : 16px ;
height: 16px ;
border-radius : 50% ;
box-sizing : border-box ;
}
#check{
display : none ;
}
#check:checked ~ .check1::after{
border-left : solid 3px #E7215E ;
border-bottom : solid 3px #E7215E ;
transform : rotate(-45deg);
transform-origin : top left ;
animation : check .3s ease-in ;
animation-fill-mode : forwards ;
}
#check:checked ~ .check3::before{
background : #23F16B ;
box-shadow : 0 0 10px #1FC258 ;
}
#check:checked ~ .check3::after{
content : "" ;
position : absolute ;
top : 14px ;
left : 14px ;
width : 6px ;
height : 6px ;
border-radius : 50% ;
background :rgba(255,255,255,.5) ;
box-shadow : 0 0 6px rgba(255,255,255,.7) ;
}
#check:checked ~ .check2::after{
animation : scale .5s ease-in ;
animation-fill-mode : forwards ;
}
@keyframes check{
0%{
width: 0 ;
height : 0 ;
}
30%{
width : 0 ;
height : 8px ;
}
50% {
width : 0 ;
height : 8px ;
}
100%{
width : 12px ;
height : 8px ;
}
}
@keyframes scale{
0% {
transform : scale(0);
}
25% {
transform : scale(1.1);
}
40% {
transform : scale(0.9);
}
55% {
transform : scale(1.05);
}
70% {
transform : scale(0.95);
}
85% {
transform : scale(1.02);
}
100%{
transform : scale(1);
}
}