CSS Clip clipping element Animation instance

1.CSS

. Fixed{position:fixed;width:90px;Height:90px;background:Red;Border:0px solid Blue; Left:100px;Top:100px;}. Fixed:before{position:Absolute;width:100px;Height:100px;margin:-5px;content:"';Box-shadow:inset 0px 0px 0px 2px blue;Animation:animateone linear 4s infinite; }. Fixed:after{position:Absolute;width:100px;Height:100px;margin:-5px;content:"';Box-shadow:inset 0px 0px 0px 2px blue;Animation:animateone linear 4s infinite;Animation-delay:-2s;/*set negative values here to advance to the specified state*/}@keyframes Animateone{0%,100% {clip:rect (0px,100px,5px,0px); }25%{Clip:rect (0px,5px,100px,0px); }50%{Clip:rect (95px,100px,100px,0px); }75%{Clip:rect (0px,100px,100px,95px); }}

Note:

Animation-delay note two points when used alone:
1. Need to be placed behind the animation property
2. You can set negative numbers to adjust the start state of the animation

Show Results:

More:

CSS Clip Cut Element instance

CSS Clip Properties

CSS Clip clipping element Animation instance