Menu
I have a div whose height and width will be dynamic. I'm tring to have an dotted animation border to that div. Problem which i'm facing is animation duration is not relative to the height and width. i.e whatever height and width its animation should be at same speed across all the corners
.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>
968
To run your animation effect at a faster or slower pace, change the Duration setting. On the slide, click the text or object that contains the animation effect that you want to set the speed for. On the Animations tab, in the Duration box, enter the number of seconds that you want the effect to run.
The animation-duration property is used to specify how long the animation cycle should take. The time is specified in seconds or milliseconds, and is initially set to '0s', which means that the animation occurs instantaneously. You can specify one duration or multiple comma-separated durations.
This can be specified in either in seconds or in milliseconds. The default value is 0, which means that no animation will occur.
The time that an animation takes to complete one cycle. This may be specified in either seconds ( s ) or milliseconds ( ms ).
Just correcting the direction of the animation
.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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
