CSS-анимация «Чек-лист»
HTML
HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Анимация SVGPNG.RU</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class = "cont"> <div class = "list" > <div class = "checkboxborder" id = "ch1" > <div class = "checked" id = "ck1" ></div> </div> <div class = "checkboxborder" id = "ch2" > <div class = "checked" id = "ck2" ></div> </div> <div class = "checkboxborder" id = "ch3" > <div class = "checked" id = "ck3" ></div> </div> </div> </div> </div> </body> </html>
CSS
CSS
.cont{
height: 100px;
width: 100px;
position: relative;
overflow:hidden;
}
.list{
height: 80px;
width: 60px;
border:solid;
background-size: cover;
position: absolute;
left: 20px;
top: 10px;
overflow:hidden;
border-radius:3px;
color: #0267FF;
transform: skew(-5deg, -5deg);
animation-name: listA;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
.checkboxborder{
height: 10px;
width: 10px;
border:solid;
background-size: cover;
position: absolute;
left: 40px;
top: 5px;
overflow:hidden;
border-radius:1px;
border-width:2px;
color: #0267FF;
}
.checked{
background: url("check.svg");
background-size: cover;
width: 10px;
height: 10px;
}
#ch1{
animation-name: ch1A;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#ch2{
left:40px;
top:25px;
animation-name: ch1A;
animation-duration: 5s;
animation-delay: .3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#ch3{
left:40px;
top:45px;
animation-name: ch1A;
animation-duration: 5s;
animation-delay: .6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#ck1{
animation-name: chk1A;
animation-duration: 5s;
animation-delay: .0s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#ck2{
animation-name: chk1A;
animation-duration: 5s;
animation-delay: .3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#ck3{
animation-name: chk1A;
animation-duration: 5s;
animation-delay: .6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes listA {
0% {transform: skew(0deg, 0deg);}
50% {transform: skew(-2deg, 2deg);}
100% {transform: skew(0deg, 0deg);}
}
@keyframes ch1A {
0%{transform:scale(1); color:#0267FF}
30%{transform:scale(1); color:#0267FF}
40%{transform:scale(1.2); color:#00E075}
43%{transform:scale(1.2); color:#0267FF}
45%{transform:scale(1); color:#0267FF}
}
@keyframes chk1A {
0%{transform:scale(0.5); color:#0267FF}
30%{transform:scale(0.5); color:#0267FF}
40%{transform:scale(1.3); color:#00E075}
43%{transform:scale(1.3); color:#0267FF}
45%{transform:scale(0.3); color:#0267FF}
100%{transform:scale(0.5); color:#0267FF}
}
Изображение
Скачайте изображение в SVG или PNG здесь.