CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Gerardo
Gerardo

Reputation: 113

Animating a border color

I have a navigation bar, which has a gradient bottom border. I want to animate that gradient so the colors move. I tried using the animation provided on this site http://www.gradient-animator.com/ , but couldn't get it to work. Could you point me out to a solution? I don't mind using CSS only, or some combination of javascript with it.

Would it be possible to create a border-image gradient transition this way? https://jsfiddle.net/q4x5zyty/

I am trying to animate the gradient color border.

body {
  height: 100%;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
}
a {
  color: #e0dcd4;
  text-decoration: none;
}
.top-nav-container {
  overflow-x: visible;
  overflow-y: visible;
  height: 60px;
  border-image: linear-gradient(to right, #C04848, #480048) 100% 1;
  border-image-slice: 50;
  border-width: 0 0 3px 0;
  box-shadow: black 0px 12px 9px -9px;
}
.wrapper {
  position: static;
  width: 100%;
  height: 100%;
  min-height: 100%;
  min-width: 100%;
  background-color: #0b131b;
  background-image: -webkit-radial-gradient(50% 0%, circle farthest-side, #1b232c 8%, #10171d);
  background-image: radial-gradient(circle farthest-side at 50% 0%, #1b232c 8%, #10171d);
  font-family: Lato, sans-serif;
  font-weight: 300;
}
.nav-buttons {
  width: 100%;
}
.nav-buttons-each {
  width: 25%;
  font-family: Lato, sans-serif;
  color: #e0dcd4;
  font-size: 16px;
  font-weight: 300;
  text-align: center;
  text-transform: uppercase;
}
.top-navbar {
  background-color: transparent;
}
<body>
  <div class="wrapper">
    <div class="w-container top-nav-container">
      <div class="w-nav top-navbar" data-collapse="tiny" data-animation="default" data-duration="400" data-contain="1">
        <div class="w-container">
          <nav class="w-nav-menu nav-buttons" role="navigation">
          </nav>

Thank you!

Upvotes: 1

Views: 995

Answers (2)

Jayesh
Jayesh

Reputation: 569

<!doctype html>
<html>
<head>
<title>Gradient Animation</title>
<meta charset="UTF-8"/>
<style>
.head {
background: linear-gradient(270deg, #cc0000, #0028cc, #ccc800);
background-size: 600% 600%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
width: 500px;
height: 300px;
}
.head-mid {
background: #fff;
width: 500px;
height: 280px;
}
@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName { 
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

</style>
</head>
<body>

<div class="head">
<div class="head-mid"></div>
</div>

</body>
</html>

try this :)

Upvotes: 0

danyamachine
danyamachine

Reputation: 1908

what http://www.gradient-animator.com/ is doing is animating the position of the background so that it appears that the color of the background is being animated. in order to achieve the same effect, you will have to "fake" the border by nesting elements. here's a jsfiddle.

The html: 

<div>
    <div> HELLO </div>
</div>

The css:

(the padding of the outer element is effectively the border-width of its child) 

div{

    background: linear-gradient(85deg, #246655, #d0e8e2, #ae59bb);
    background-size: 600% 600%;
     padding:20px;
    -webkit-animation: AnimationName 5s ease infinite;
    -moz-animation: AnimationName 5s ease infinite;
    animation: AnimationName 5s ease infinite;

}
div > div{
    height:400px;
    background:#fff;


}

@-webkit-keyframes AnimationName {
    0%{background-position:18% 0%}
    50%{background-position:83% 100%}
    100%{background-position:18% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:18% 0%}
    50%{background-position:83% 100%}
    100%{background-position:18% 0%}
}
@keyframes AnimationName { 
    0%{background-position:18% 0%}
    50%{background-position:83% 100%}
    100%{background-position:18% 0%}
}

Upvotes: 2

Related Questions