CODEWITHSUNDEEP
htmlcss
cssfan
cssfan

Reputation: 421

CSS Gradient not transitioning from end to end

My css gradient animation is working except all parts are changing at the same time not running from end to end like this www.verily.com, here is what I tried,

    .animated  {
  -webkit-animation: animated1 20s infinite;
  animation: animated1 20s infinite;
}



@-webkit-keyframes animated1 {
    0%,
    100% {
        background-color: #2878ff
    }
    50% {
        background-color: #ff1643
    }
}

@keyframes animated1 {
    0%,
    100% {
        background-color: #2878ff
    }
    50% {
        background-color: #ff1643
    }
}

Upvotes: 0

Views: 103

Answers (2)

Asons
Asons

Reputation: 87191

Here is one way to animate a linear-gradient

body {
  background: linear-gradient(270deg, #f51313, #fbf708);
  background-size: 400% 400%;
  -webkit-animation: anim 10s ease infinite;
  animation: anim 10s ease infinite;
}
@-webkit-keyframes anim {
  0%, 100% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
}
@keyframes anim {
  0%, 100% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
}

Upvotes: 1

Serg Chernata
Serg Chernata

Reputation: 12400

Actually, the way verily achieves their effect is by animating an image.

* {
    box-sizing: border-box;
}

body{
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.verily-hero-image-gradient{
  background-image: url(//verily.com/img/gradient-loop.png);
  background-size: 100% 100%;
  animation: hero-gradient-loop 20s infinite;
  display: block;
  height: 1000%;
  position: fixed;
  left: 0;
  opacity: 1;
  top: 0;
  width: 100%;
  z-index: -1;
}

@keyframes hero-gradient-loop{
  0%{
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
  }
  100%{
    -webkit-transform:translate3d(0,-50%,0);
    transform:translate3d(0,-50%,0);
  }
}
<div class="verily-hero-image-gradient"></div>

Upvotes: 1

Related Questions