CSS-анимация «Чек-лист»
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
.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} }