so, i'm trying to achieve this kind of animated border with css
sample of the border
the sample animated css is:
#keyframes bg {
0% {
background-size: 0 3px,
3px 0,
0 3px,
3px 0;
}
25% {
background-size: 100% 3px,
3px 0,
0 3px,
3px 0;
}
50% {
background-size: 100% 3px,
3px 100%,
0 3px,
3px 0;
}
75% {
background-size: 100% 3px,
3px 100%,
100% 3px,
3px 0;
}
100% {
background-size: 100% 3px,
3px 100%,
100% 3px,
3px 100%;
}
}
div {
width: 25%;
margin: 2rem auto;
padding: 2em;
background-repeat: no-repeat;
background-image: linear-gradient(to right, #f5ca00 100%, #f5ca00 100%),
linear-gradient(to bottom, #f5ca00 100%, #f5ca00 100%),
linear-gradient(to right, #f5ca00 100%, #f5ca00 100%),
linear-gradient(to bottom, #f5ca00 100%, #f5ca00 100%);
background-size: 100% 3px,
3px 100%,
100% 3px,
3px 100%;
background-position: 0 0,
100% 0,
100% 100%,
0 100%;
animation: bg 1.25s cubic-bezier(0.19, 1, 0.22, 1) 1;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}
<div>
<img src="https://moro.fund/wp-content/uploads/2020/08/scale-photo.png" alt="">
</div>
i just want the last animated line to be half and inside the image just like the sample at the start :)
please note that is gonna be used inside wordpress.
any kind of help or guidance is appreciated.
Try to add to div styles with :after pseudo class and animate it on hover or on initail animations.
#keyframes bg {
0% {
background-size: 0 3px,
3px 0,
0 3px,
3px 0;
}
25% {
background-size: 100% 3px,
3px 0,
0 3px,
3px 0;
}
50% {
background-size: 100% 3px,
3px 100%,
0 3px,
3px 0;
}
75% {
background-size: 100% 3px,
3px 100%,
100% 3px,
3px 0;
}
100% {
background-size: 100% 3px,
3px 100%,
100% 3px,
3px 100%;
}
}
div {
width: 25%;
margin: 2rem auto;
padding: 2em;
background-repeat: no-repeat;
background-image: linear-gradient(to right, #f5ca00 100%, #f5ca00 100%),
linear-gradient(to bottom, #f5ca00 100%, #f5ca00 100%),
linear-gradient(to right, #f5ca00 100%, #f5ca00 100%),
linear-gradient(to bottom, #f5ca00 100%, #f5ca00 100%);
background-size: 100% 3px,
3px 100%,
100% 3px,
3px 100%;
background-position: 0 0,
100% 0,
100% 100%,
0 100%;
animation: bg 1.25s cubic-bezier(0.19, 1, 0.22, 1) 1;
animation-play-state: paused;
position: relative;
}
div:hover {
animation-play-state: running;
}
div:after{
content: '';
width: 2px;
height: 0;
background: #f5ca00;
position: absolute;
right: 0;
top: 0;
transition: height .3s ease;
}
div:hover:after {
height: 100px;
}
<div>
<img src="https://moro.fund/wp-content/uploads/2020/08/scale-photo.png" alt="">
</div>
Related
I'm trying to create a "cycling rainbow glow" effect for text in CSS. I've more or less accomplished that, but I've ran into something I can't explain. When I remove the superfluous filter: blur(0px) from the parent element the ::after psudo-element collapses to the left.
.rainbow {
display: inline-block;
color: white;
filter: blur(0px);
}
.rainbow::after {
content: attr(data-text);
z-index: -1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(90deg,
hsl(0, 100%, 50%),
hsl(30, 100%, 50%),
hsl(60, 100%, 50%),
hsl(90, 100%, 50%),
hsl(120, 100%, 50%),
hsl(150, 100%, 50%),
hsl(180, 100%, 50%),
hsl(210, 100%, 50%),
hsl(240, 100%, 50%),
hsl(270, 100%, 50%),
hsl(300, 100%, 50%),
hsl(330, 100%, 50%),
hsl(360, 100%, 50%))
0 0 / 200% 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
filter: blur(10px);
animation: scroll_background 2s linear infinite;
}
#keyframes scroll_background {
to { background-position: -200% 0 }
}
https://jsfiddle.net/tpm1gf5v/
It looks like this is because without filter: blur(0px), the rainbow is no longer a relative container (according to this answer), and also does not have a stacking context to place ::after properly.
This may have caused ::after to be placed relative to body which resulted in the error.
It seems to be fixed by giving rainbow a relative positioning, and specify a new stacking context:
.rainbow {
display: inline-block;
color: white;
/* 👇 Add this */
position: relative;
/* 👇 Add one of these two for a new stacking context */
isolation: isolate;
/* z-index: 0; */
}
Example: (modified from the posted jsfiddle)
html,
body {
background: #d6daf0;
font-family: arial, helvetica, sans-serif;
font-size: 100px;
}
.rainbow {
display: inline-block;
color: white;
/* 👇 Add this */
position: relative;
/* 👇 Add one of these two for a new stacking context */
isolation: isolate;
/* z-index: 0; */
}
.rainbow::after {
content: attr(data-text);
z-index: -1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(90deg,
hsl(0, 100%, 50%),
hsl(30, 100%, 50%),
hsl(60, 100%, 50%),
hsl(90, 100%, 50%),
hsl(120, 100%, 50%),
hsl(150, 100%, 50%),
hsl(180, 100%, 50%),
hsl(210, 100%, 50%),
hsl(240, 100%, 50%),
hsl(270, 100%, 50%),
hsl(300, 100%, 50%),
hsl(330, 100%, 50%),
hsl(360, 100%, 50%)) 0 0 / 200% 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
filter: blur(10px);
animation: scroll_background 2s linear infinite;
}
#keyframes scroll_background {
to {
background-position: -200% 0
}
}
<span class="rainbow" data-text="Hello, World!">Hello, World!</span>
Hope this will help.
I would like to create a raining-effect for my weather app with CSS-only. However, even though I achieved satisfying results with the look, I can't seem to make them cover the entire screen continuously and not just random chunks of it - how would I go about this?
body {
overflow: hidden;
}
#background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#background.night {
background: linear-gradient(#0F2129, #47334A);
}
#background>.cloud {
width: 900px;
height: 900px;
position: absolute;
background-color: #fff;
border-radius: 50%;
animation: cloud 10s infinite alternate;
}
#background.rain>.cloud {
opacity: .5;
}
#background>.cloud:nth-child(even) {
animation-delay: 3s;
}
#background.night>.cloud {
background-color: grey;
}
#background.rain>.cloud:before,
#background.rain>.cloud:after {
animation: rain 1s infinite linear;
content: '';
border-radius: 50%;
display: block;
height: 6px;
width: 3px;
opacity: 1;
margin-top: 700px;
}
#background.rain>.cloud:after {
transform: translate(50px);
}
#background.rain>.cloud:nth-child(even):before,
#background.rain>.cloud:nth-child(even):after {
animation-delay: .3s;
}
#keyframes rain {
0% {
box-shadow: #cccccc 30px 30px, #cccccc 40px 40px, #cccccc 50px 75px, #cccccc 55px 50px, #cccccc 70px 100px, #cccccc 80px 95px, #cccccc 110px 45px, #cccccc 75px 50px, #cccccc 80px 20px, #cccccc 65px 40px, #cccccc 100px 80px, #cccccc 45px 85px, #cccccc 95px 50px, #cccccc 90px 35px;
}
100% {
box-shadow: #cccccc 30px 970px, #cccccc 40px 980px, #cccccc 50px 945px, #cccccc 55px 980px, #cccccc 70px 960px, #cccccc 80px 945px, #cccccc 110px 995px, #cccccc 75px 950px, #cccccc 80px 920px, #cccccc 65px 940px, #cccccc 100px 980px, #cccccc 45px 985px, #cccccc 95px 950px, #cccccc 90px 985px;
}
}
#keyframes cloud {
100% {
transform: translate(-50px) scale(1.05);
}
}
<div id="background" class="rain night">
<div class="cloud" style="top: -797.689px; left: -315px;"></div>
<div class="cloud" style="top: -865.689px; left: -225px;"></div>
<div class="cloud" style="top: -814.689px; left: -65px;"></div>
<div class="cloud" style="top: -853.689px; left: 253px;"></div>
<div class="cloud" style="top: -823.689px; left: 23px;"></div>
<div class="cloud" style="top: -843.689px; left: 109px;"></div>
</div>
This is a good job for some random radial-gradient that you repeat. Not linear-gradient because you will have a hard time creating spaces between repetition (maybe impossible).
Here is a basic example. We use the same gradient at different random position and all will repeat:
html {
height:100%;
background: linear-gradient(#0F2129, #47334A);
overflow:hidden;
}
html:before {
content:"";
position:absolute;
bottom:0;
right:0;
left:0;
height:calc(100% + 100px); /* should be bigger than (100% + 55px)*/
background:
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) -12px 3px,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 17px 0,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 6px 12px,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 24px 23px,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 39px 30px,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 5px 43px;
background-size:50px 55px;
animation:rain 0.2s linear infinite;
}
#keyframes rain{
to {
transform:translateY(55px); /* Same as the height of the background-size */
}
}
And if you want a litte skewing:
html {
height:100%;
background: linear-gradient(#0F2129, #47334A);
overflow:hidden;
}
html:before {
content:"";
position:absolute;
bottom:0;
right:-20%;
left:-20%;
height:calc(100% + 100px); /* should be bigger than (100% + 55px)*/
background:
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) -12px 3px,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 17px 0,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 6px 12px,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 24px 23px,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 39px 30px,
radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 5px 43px;
background-size:50px 55px;
animation:rain 0.2s linear infinite;
transform:skew(-8deg);
}
#keyframes rain{
to {
transform:skew(-8deg) translateY(55px); /* Same as the height of the background-size */
}
}
And with CSS variables to easily control:
html {
height:100%;
background: linear-gradient(#0F2129, #47334A);
overflow:hidden;
--s:2px 8px; /* size of drop of water*/
--c:#ccc; /* color of the water*/
--a:-7deg; /* control the skewing*/
--w:50px; /* width of the pattern*/
--h:55px; /* height of the pattern*/
--rad:radial-gradient(var(--s),var(--c) 100%,transparent 100%)
}
html:before {
content:"";
position:absolute;
bottom:0;
right:-20%;
left:-20%;
height:calc(100% + var(--h) + 10px); /* should be bigger than (100% + var(--h))*/
background:
var(--rad) -12px 3px,
var(--rad) 17px 0,
var(--rad) 6px 12px,
var(--rad) 24px 23px,
var(--rad) 39px 30px,
var(--rad) 5px 43px;
background-size:var(--w) var(--h);
animation:rain 0.2s linear infinite;
transform:skew(var(--a));
}
#keyframes rain{
to {
transform:skew(var(--a)) translateY(var(--h)); /* Same as the height of the background-size */
}
}
You can consider two layers with a different pattern for another kind of animation (more random)
html {
height:100%;
background: linear-gradient(#0F2129, #47334A);
overflow:hidden;
--s:2px 8px; /* size of drop of water*/
--c:#ccc; /* color of the water*/
--a:-7deg; /* control the skewing*/
--w:53px; /* width of the pattern*/
--h:55px; /* height of the pattern*/
--rad:radial-gradient(var(--s),var(--c) 100%,transparent 100%)
}
html:before,
html:after{
content:"";
position:absolute;
bottom:0;
right:-20%;
left:-20%;
height:calc(100% + var(--h) + 10px); /* should be bigger than (100% + var(--h))*/
background:
var(--rad) -12px 3px,
var(--rad) 17px 0,
var(--rad) 6px 12px,
var(--rad) 24px 23px,
var(--rad) 39px 30px,
var(--rad) 5px 43px;
background-size:var(--w) var(--h);
animation:rain 0.2s linear infinite;
transform:skew(var(--a));
}
html:after {
--h:70px;
--w:61px;
}
#keyframes rain{
to {
transform:skew(var(--a)) translateY(var(--h)); /* Same as the height of the background-size */
}
}
I think you were missing some margin-left
body {
overflow: hidden;
}
#background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#background.night {
background: linear-gradient(#0F2129, #47334A);
}
#background>.cloud {
width: 900px;
height: 900px;
position: absolute;
background-color: #fff;
border-radius: 50%;
animation: cloud 10s infinite alternate;
}
#background.rain>.cloud {
opacity: .5;
}
#background>.cloud:nth-child(even) {
animation-delay: 3s;
}
#background.night>.cloud {
background-color: grey;
}
#background.rain>.cloud:before,
#background.rain>.cloud:after {
animation: rain 1s infinite linear;
content: '';
border-radius: 50%;
display: block;
height: 6px;
width: 3px;
opacity: 1;
margin-top: 700px;
margin-left:400px;
}
#background.rain>.cloud:after {
transform: translate(50px);
}
#background.rain>.cloud:nth-child(even):before,
#background.rain>.cloud:nth-child(even):after {
animation-delay: .3s;
}
#keyframes rain {
0% {
box-shadow: #cccccc 30px 30px, #cccccc 40px 40px, #cccccc 50px 75px, #cccccc 55px 50px, #cccccc 70px 100px, #cccccc 80px 95px, #cccccc 110px 45px, #cccccc 75px 50px, #cccccc 80px 20px, #cccccc 65px 40px, #cccccc 100px 80px, #cccccc 45px 85px, #cccccc 95px 50px, #cccccc 90px 35px;
}
100% {
box-shadow: #cccccc 30px 970px, #cccccc 40px 980px, #cccccc 50px 945px, #cccccc 55px 980px, #cccccc 70px 960px, #cccccc 80px 945px, #cccccc 110px 995px, #cccccc 75px 950px, #cccccc 80px 920px, #cccccc 65px 940px, #cccccc 100px 980px, #cccccc 45px 985px, #cccccc 95px 950px, #cccccc 90px 985px;
}
}
#keyframes cloud {
100% {
transform: translate(-50px) scale(1.05);
}
}
<div id="background" class="rain night">
<div class="cloud" style="top: -797.689px; left: -315px;"></div>
<div class="cloud" style="top: -865.689px; left: -225px;"></div>
<div class="cloud" style="top: -814.689px; left: -65px;"></div>
<div class="cloud" style="top: -853.689px; left: 253px;"></div>
<div class="cloud" style="top: -823.689px; left: 23px;"></div>
<div class="cloud" style="top: -843.689px; left: 109px;"></div>
</div>
How to created dash dot and dash dot dot lines and rectangles like
in CSS without using external links to images or other (inline data urls can used if there is no better way).
https://codepen.io/ibrahimjabbari/pen/ozinB
contains some samples like
hr.style17:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
. It uses content and rotate CSS properties, maybe those can used.
You can try a combination of repeating-linear-gradient and radial-gradient
.dash-dot {
height:50px;
background:
radial-gradient(circle at center,#000 2px,transparent 3px) 5px 50%/20px 5px repeat-x,
repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) center/100% 3px no-repeat
}
.dash-dot-dot {
height:50px;
background:
radial-gradient(circle at center,#000 2px,transparent 3px) 0px 50%/30px 5px repeat-x,
radial-gradient(circle at center,#000 2px,transparent 3px) 10px 50%/30px 5px repeat-x,
repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 30px) center/100% 3px no-repeat;
}
<div class="dash-dot"></div>
<div class="dash-dot-dot"></div>
To have a rectangle you need to repeat the same on each side:
.dash-dot {
height:210px;
background:
/*right*/
repeating-linear-gradient(to bottom,#000,#000 10px,transparent 10px,transparent 20px) calc(100% - 1px) 0/3px 100% no-repeat,
radial-gradient(circle at center,#000 2px,transparent 3px) 100% 5px/5px 20px repeat-y,
/*left*/
repeating-linear-gradient(to bottom,#000,#000 10px,transparent 10px,transparent 20px) 1px 0/3px 100% no-repeat,
radial-gradient(circle at center,#000 2px,transparent 3px) 0 5px/5px 20px repeat-y,
/*top*/
repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) 0 1px/100% 3px no-repeat,
radial-gradient(circle at center,#000 2px,transparent 3px) 5px 0/20px 5px repeat-x,
/*bottom*/
repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) 0 calc(100% - 1px)/100% 3px no-repeat,
radial-gradient(circle at center,#000 2px,transparent 3px) 5px 100%/20px 5px repeat-x;
}
<div class="dash-dot"></div>
button {
background: none;
border: 0;
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
}
button::before, button::after {
box-sizing: inherit;
content: " ";
position: absolute;
width: 100%;
height: 100%;
}
.draw {
transition: color 0.25s;
}
.draw::before, .draw::after {
border: 2px solid transparent;
width: 0;
height: 0;
transition: width 1.25s ease-out 1.25s, height 1.25s ease-out 1.25s;
}
.draw::before {
top: 0;
left: 0;
}
.draw::after {
bottom: 0;
right: 0;
}
.draw:hover {
color: #60daaa;
}
.draw:hover::before, .draw:hover::after {
width: 100%;
height: 100%;
}
.draw:hover::before {
border-top-color: #60daaa;
border-right-color: #60daaa;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
<section class="buttons">
<button class="draw">Draw</button>
</section>
I have a working pen ( https://codepen.io/anon/pen/vdgdxO ) that changes the border color of an element while hovering ( top right bottom left ) with some transition to smoothen it up.
I would like to be able to "reverse" the border color change after a few seconds. Basically, I'd like to change border color when the opposite one is changing color :
border-top change color
border-right change color
border-bottom change color & border-top goes back to its original color
border-left change color & border-right goes back to its original color
border-top change color & border-bottom goes back to its original color
border-right change color & border-left goes back to its original color
etc.
Right now I only have the color change worked out, but I don't know how to "reverse" it. I'd also like this transition to loop forever, but I'm clueless on where to start. Any suggestions?
I would use multiple linear-gradient and a complex animation (by animating size/position of each one) to obtain the final result. If you get the trick you can easily adjust the different values to obtain any animation you want.
.draw {
padding: 20px 50px;
outline:none;
border: none;
box-shadow: none;
background-image:
linear-gradient(#f45e61, #f45e61),
linear-gradient(#f45e61, #f45e61),
linear-gradient(#f45e61, #f45e61),
linear-gradient(#f45e61, #f45e61),
linear-gradient(#60daaa, #60daaa),
linear-gradient(#60daaa, #60daaa),
linear-gradient(#60daaa, #60daaa),
linear-gradient(#60daaa, #60daaa);
background-position: 0 0, 0 0, 0 100%, 0 100%,
0 0, 0 0, 0 100%, 100% 0;
background-size: 3px 0%, 0% 3px, 0% 3px, 3px 0%,
3px 100%, 100% 3px, 100% 3px,3px 100%;
background-color:transparent;
background-repeat:no-repeat;
transition:0.2s linear;
}
.draw:hover {
background-position: 0 100%, 0 0, 0 100%, 100% 0,
0 0, 0 0, 0 100%, 100% 0;
background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%,
3px 100%, 100% 3px, 100% 3px,3px 100%;
animation: animate 1.4s linear infinite 0.2s;
}
#keyframes animate {
0% {
background-position: 0 100%, 0 0, 0 100%, 100% 0,
0 0, 0 0, 0 100%, 100% 0;
background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%,
3px 100%, 100% 3px, 100% 3px,3px 100%;
}
40% {
background-position: 0 100%, 100% 0, 100% 100%, 100% 0,
0 0, 0 0, 0 100%, 100% 0;
background-size: 3px 0%, 100% 3px, 0% 3px,3px 100%,
3px 100%, 100% 3px, 100% 3px,3px 100%;
}
60% {
background-position: 0 100%, 100% 0, 100% 100%, 100% 100%,
0 0, 0 0, 0 100%, 100% 0;
background-size: 3px 0%, 0% 3px, 100% 3px,3px 100%,
3px 100%, 100% 3px, 100% 3px,3px 100%;
}
70% {
background-position: 0 100%, 100% 0, 0% 100%, 100% 100%,
0 0, 0 0, 0 100%, 100% 0;
background-size: 3px 100%, 0% 3px, 100% 3px,3px 0%,
3px 100%, 100% 3px, 100% 3px,3px 100%;
}
80% {
background-position: 0% 0%, 0% 0, 0% 100%, 100% 100%,
0 0, 0 0, 0 100%, 100% 0;
background-size: 3px 100%, 0% 3px, 0% 3px,3px 0%,
3px 100%, 100% 3px, 100% 3px,3px 100%;
}
100% {
background-position: 0% 0%, 0 0, 0 100%, 100% 100%,
0 0, 0 0, 0 100%, 100% 0;
background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%,
3px 100%, 100% 3px, 100% 3px,3px 100%;
}
}
<button class="draw">Draw</button>
How does it work?
The structure: We have 8 linear-gradient. 4 will simply create the initial border and won't move (they are placed at the bottom layer) and 4 will be used to draw the line that will create our animation above the initial border (they are placed at the top layer).
The order is important as within background properties we will have 8 values each one for each gradient. You will notice the 3px value that will simply specify the width or height of each gradient (similar to the border-width) and it won't change during the animation.
The animation: I will adjust position/size of each gradient to create the animation. it's divided into 2 parts: a small transition and a big animation. The transition is simply used to create the initial state of the animation that's why the duration used for the transition is the same as the delay of the animation.
The first step is to animate the top border from left to right. To do this the gradient should be positioned at (0,0) [top,left] with a size of 0% 3px [width height]. Then I simply change the size to 100% 3px and I will get the needed animation (the 3px as described before won't change).
Now to animate the second border we do the same. We need a gradient positioned at (100%,0) [top,right] with a size of 3px 0% [width height] that we animate to 3px 100%:
Now since we have two borders we need to animate the third one AND hide the first one. I won't detail the third border as it's similar to the above ones so let's see how to hide the top one. The first intuitive idea is to simply set its size back to 0% 3px but this will simply create the inverse animation and thus we will have a right to left animation which is bad. The trick here is to adjust the position of the gradient to make it (100%,0) [top,right] instead of (0,0) as both positions are equivalent when the gradient is 100% size (so we do this at the previous step when animating the second one). Now, we can put back the size to 0% 3px and we will have a left to right animation:
We continue the same logic until we get back to the initial state and by specifying infinite in the animation property we will have the needed effect.
So the main Idea is to have a gradient with the size equal to 0% that we animate to full size (100%) in a given direction then we change its position (this won't have any effect on full size) and then animate back its size to 0. We mix this with the 4 gradients we have.
UPDATE
To avoid the confusing with all these gradient here is an update where I used a pseudo element for the static border thus we keep only 4 gradients for the animation:
.draw {
position:relative;
padding: 20px 50px;
outline:none;
border: none;
box-shadow: none;
background-image:
linear-gradient(#f45e61, #f45e61),
linear-gradient(#f45e61, #f45e61),
linear-gradient(#f45e61, #f45e61),
linear-gradient(#f45e61, #f45e61);
background-position: 0 0, 0 0, 0 100%, 0 100%;
background-size: 3px 0%, 0% 3px, 0% 3px, 3px 0%;
background-color:transparent;
background-repeat:no-repeat;
transition:0.2s linear;
}
.draw:before {
content:"";
position:absolute;
z-index:-1;
top:0;
right:0;
left:0;
bottom:0;
border:3px solid #60daaa;
}
.draw:hover {
background-position: 0 100%, 0 0, 0 100%, 100% 0;
background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%;
animation: animate 1.4s linear infinite 0.2s;
}
#keyframes animate {
0% {
background-position: 0 100%, 0 0, 0 100%, 100% 0;
background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%;
}
40% {
background-position: 0 100%, 100% 0, 100% 100%, 100% 0;
background-size: 3px 0%, 100% 3px, 0% 3px,3px 100%;
}
60% {
background-position: 0 100%, 100% 0, 100% 100%, 100% 100%;
background-size: 3px 0%, 0% 3px, 100% 3px,3px 100%
}
70% {
background-position: 0 100%, 100% 0, 0% 100%, 100% 100%;
background-size: 3px 100%, 0% 3px, 100% 3px,3px 0%;
}
80% {
background-position: 0% 0%, 0% 0, 0% 100%, 100% 100%;
background-size: 3px 100%, 0% 3px, 0% 3px,3px 0%;
}
100% {
background-position: 0% 0%, 0 0, 0 100%, 100% 100%;
background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%
}
}
<button class="draw">Draw</button>
I want to add animated border effect to my web page elements and found this pen on codepen
HTML
<div>
<h1>Hover over me!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
CSS
#keyframes bg {
0% {
background-size: 0 3px, 3px 0, 0 3px, 3px 0;
}
25% {
background-size: 100% 3px, 3px 0, 0 3px, 3px 0;
}
50% {
background-size: 100% 3px, 3px 100%, 0 3px, 3px 0;
}
75% {
background-size: 100% 3px, 3px 100%, 100% 3px, 3px 0;
}
100% {
background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
}
}
div {
width: 25%;
margin: 2rem auto;
padding: 2rem;
background-repeat: no-repeat;
background-image:
linear-gradient(to right, #c9c9c9 100%, #c9c9c9 100%),
linear-gradient(to bottom, #c9c9c9 100%, #c9c9c9 100%),
linear-gradient(to right, #c9c9c9 100%, #c9c9c9 100%),
linear-gradient(to bottom, #c9c9c9 100%, #c9c9c9 100%);
background-size:
100% 3px,
3px 100%,
100% 3px,
3px 100%;
background-position:
0 0,
100% 0,
100% 100%,
0 100%;
animation: bg 1.25s cubic-bezier(0.19, 1, 0.22, 1) 1;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}
It is exactly what I need but it does not work on IE. Tried to tweak the code but couldn't make it work. Would be grateful for your help. Thanks.
I opened your codepen with Edge and it works fine i believe :)
(IE indeed have a problem, it loads with border already drawn)