.book{--color:#38b7b1;--duration:6.8s;width:2rem;height:.8rem;margin:2rem auto;font-size:16px;position:relative}.book .inner{transform-origin:0 0;width:100%;height:100%;animation:book var(--duration)ease infinite;position:relative;transform:rotate(-90deg)}.book .inner .left,.book .inner .right{background:var(--color);border-radius:.125rem;width:3.75rem;height:.25rem;position:absolute;top:0}.book .inner .left:before,.book .inner .right:before{content:"";background:inherit;border-radius:.125rem;width:3rem;height:.25rem;position:absolute;top:-.6rem;left:.4rem}.book .inner .left{transform-origin:3.6rem .125rem;animation:left var(--duration)ease infinite;right:1.75rem;transform:rotate(90deg)}.book .inner .right{transform-origin:.125rem .125rem;animation:right var(--duration)ease infinite;left:1.75rem;transform:rotate(-90deg)}.book .inner .middle{border:.25rem solid var(--color);border-top:0;border-radius:0 0 .6rem .6rem;width:100%;height:100%;transform:translateY(.125rem)}.book ul{margin:0;padding:0;list-style:none;position:absolute;top:0;left:50%}.book ul li{transform-origin:100% .125rem;background:var(--color);width:3rem;height:.25rem;animation-duration:var(--duration);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform;border-radius:.125rem;animation-timing-function:ease;animation-iteration-count:infinite;position:absolute;top:-.6rem;right:0;transform:translate(-1.1rem)rotate(0)}.book ul li:first-child{animation-name:page-1}.book ul li:nth-child(2){animation-name:page-2}.book ul li:nth-child(3){animation-name:page-3}@keyframes page-1{6%{transform:rotate(0)translate(-18px)}15%,55%{transform:rotate(180deg)translate(-18px)}65%{transform:rotate(0)translate(-18px)}}@keyframes page-2{8%{transform:rotate(0)translate(-18px)}17%,57%{transform:rotate(180deg)translate(-18px)}67%{transform:rotate(0)translate(-18px)}}@keyframes page-3{10%{transform:rotate(0)translate(-18px)}19%,59%{transform:rotate(180deg)translate(-18px)}69%{transform:rotate(0)translate(-18px)}}@keyframes left{4%{transform:rotate(90deg)}10%,40%{transform:rotate(0)}46%,54%{transform:rotate(90deg)}60%,90%{transform:rotate(0)}96%{transform:rotate(90deg)}}@keyframes right{4%{transform:rotate(-90deg)}10%,40%{transform:rotate(0)}46%,54%{transform:rotate(-90deg)}60%,90%{transform:rotate(0)}96%{transform:rotate(-90deg)}}@keyframes book{4%{transform:rotate(-90deg)}10%,40%{transform-origin:2px 2px;transform:rotate(0)}40.01%,59.99%{transform-origin:30px 2px}46%,54%{transform:rotate(90deg)}60%,90%{transform-origin:2px 2px;transform:rotate(0)}96%{transform:rotate(-90deg)}}