Geek Answers Handbook

Animation duration should be relative to height and width.

I have a div whose height and width will be dynamic. I am trying to have a dotted animation frame for this div. The problem I am facing is the duration of the animation is not relative to the height and width. that is, regardless of the height and width, its animation should be at the same speed in all angles

.dynamic { position: absolute; height: 30px; width: 300px; overflow: hidden } .dynamic::before { animation: slideDash 2.5s infinite linear; position: absolute; content: ''; left: 0; right: 0; outline: 1px dashed #fff; box-shadow: 0 0 0 1px rgb(23, 163, 102); width: 200%; } .dynamic::after { animation: slideDash 2.5s infinite linear reverse; position: absolute; content: ''; right: 0; bottom: 0; outline: 1px dashed #fff; left: 0; box-shadow: 0 0 0 1px rgb(23, 163, 102); width: 200%; } .dynamic div::before { animation: slideDashRev 2.5s infinite linear reverse; position: absolute; content: ''; top: 0; bottom: 0; outline: 1px dashed #fff; box-shadow: 0 0 0 1px rgb(23, 163, 102); height: 200%; } .dynamic div::after { animation: slideDashRev 2.5s infinite linear; position: absolute; content: ''; top: 0; bottom: 0; outline: 1px dashed #fff; right: 0; box-shadow: 0 0 0 1px rgb(23, 163, 102); height: 200%; } @keyframes slideDash { from { transform: translateX(-50%); } to { transform: translateX(0%); } } @keyframes slideDashRev { from { transform: translateY(-50%); } to { transform: translateY(0%); } } 
 <div class="dynamic"> <div></div> </div>
+6
source share
3 answers

Try the below snippet.

 .dynamic { position: relative; width: 300px; height: 30px; overflow: hidden; color: green; } .dynamic .line { width: 100%; height: 100%; display: block; position: absolute; } .dynamic .line:nth-of-type(1) { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .dynamic .line:nth-of-type(2) { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); margin-left: -164px; /* margin-left=(minus)((height+width)/2)-(border-width) */ } .dynamic .line:nth-of-type(3) { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .dynamic .line:nth-of-type(4) { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); margin-left: 164px; /* margin-left=((height+width)/2)-(border-width) */ } .dynamic .line i { left: 0; top: 0; width: 200%; display: block; position: absolute; border-bottom: 1px dashed; -webkit-animation: move 2.5s infinite linear reverse; animation: move 2.5s infinite linear reverse; } .dynamic .text { width: 100%; line-height: 30px; display: block; text-align: center; position: absolute; font-size: 18px; } @-webkit-keyframes move { from { -webkit-transform: translateX(0%); transform: translateX(0%); } to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes move { from { -webkit-transform: translateX(0%); transform: translateX(0%); } to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } 
 <body> <div class="dynamic"> <div class="line"><i></i> </div> <div class="line"><i></i> </div> <div class="line"><i></i> </div> <div class="line"><i></i> </div> <div class="text">Some text here</div> </div> </body>
0
source 
 .dynamic { position: absolute; height: 50px; width: 50px; overflow: hidden }

Having the same dimensions for height and width , the animation speed will be the same.

Note. You can replace 50 with any measurement of your choice.

0
source

Simple animation direction fix

 .dynamic { position: relative; width: 300px; height: 30px; overflow: hidden; color: red; } .dynamic .line { width: 100%; height: 100%; display: block; position: absolute; } .dynamic .line:nth-of-type(1) { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .dynamic .line:nth-of-type(2) { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); margin-left: -164px; /* margin-left=(minus)((height+width)/2)-(border-width) */ } .dynamic .line:nth-of-type(3) { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .dynamic .line:nth-of-type(4) { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); margin-left: 164px; /* margin-left=((height+width)/2)-(border-width) */ } .dynamic .line:nth-of-type(1) i, .dynamic .line:nth-of-type(3) i { -webkit-animation: move 2.5s infinite linear reverse; animation: move 2.5s infinite linear reverse; } .dynamic .line:nth-of-type(2) i, .dynamic .line:nth-of-type(4) i { -webkit-animation: move 2.5s infinite linear; animation: move 2.5s infinite linear; } .dynamic .line i { left: 0; top: 0; width: 200%; display: block; position: absolute; border-bottom: 1px dashed; } .dynamic .text { width: 100%; line-height: 30px; display: block; text-align: center; position: absolute; font-size: 18px; } @-webkit-keyframes move { from { -webkit-transform: translateX(0%); transform: translateX(0%); } to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes move { from { -webkit-transform: translateX(0%); transform: translateX(0%); } to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } 
 <body> <div class="dynamic"> <div class="line"><i></i> </div> <div class="line"><i></i> </div> <div class="line"><i></i> </div> <div class="line"><i></i> </div> <div class="text">Same Direction!!</div> </div> </body>
0
source

More articles:


All Articles