CODEWITHSUNDEEP
htmlcss
WordCent
WordCent

Reputation: 727

background color transition in few seconds w/o JQuery

https://codepen.io/codeispoetry/pen/dRKKEY

.back {
  margin: 20px;
  padding: 100px;
  background: yellow;
  font-size: 30px;
}
<div class="back">

  Fun place to stay. We got a golf cart to see the rest of the island, but the house is well-equipped and comfortable. Vanessa was kind to pick us up and make golf cart rental arrangements. We were here on our honeymoon, it was perfect for a memorable trip!
  Hosts easily available

</div>

I want that yellow background should change with time to yellow, but I want to do ith through CSS. there is enough solution available on StackOverflow that do it with Jquery, but can we achieve this through CSS so that it works on all the browser.

https://www.w3schools.com/css/css3_animations.asp i tried this, but it roll backs to the original color. How to make th after color permanent.

Upvotes: 0

Views: 232

Answers (5)

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7165

try this code

.back {
  margin: 20px;
  padding: 100px;
  // background: yellow;
  font-size: 30px;
}

div {
  background-color: red;
  -webkit-animation-name: example;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s;
  /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}


/* Standard syntax */

@keyframes example {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}
<div class="back">

  Fun place to stay. We got a golf cart to see the rest of the island, but the house is well-equipped and comfortable. Vanessa was kind to pick us up and make golf cart rental arrangements. We were here on our honeymoon, it was perfect for a memorable trip!
  Hosts easily available

</div>

Upvotes: 0

user5014677
user5014677

Reputation: 694

.back {
  margin:20px;
  padding: 100px;
  font-size: 30px;
  animation-name: changeColor;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@-webkit-keyframes changeColor {
  0% {
    background-color: yellow;
  }
  50% {
    background-color: white;
  }
  100%{
    background-color: yellow;
  }
}



@keyframes changeColor {
  0% {
    background-color: yellow;
  }
  50% {
    background-color: white;
  }
  100%{
    background-color: yellow;
  }
}

It will change change color infinite amount of time from yellow to white back to yellow to make it look smooth.

Upvotes: 1

Karthik
Karthik

Reputation: 621

Use the below updated code. you need to add 'animation-fill-mode: forwards' to stop the animation once its completed.

.back {
    margin: 20px;
    padding: 100px;
    font-size: 30px;
    background-color: yellow;
    -webkit-animation-name: example; 
    -webkit-animation-duration: 4s; 
    animation-name: example;
    animation-duration: 4s;
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
     animation-fill-mode: forwards;
}
@-webkit-keyframes example {
    from {background-color: yellow;}
    to {background-color: white;}
}

@keyframes example {
    from {background-color: yellow;}
    to {background-color: white;}
}

Upvotes: 1

Lars Beck
Lars Beck

Reputation: 3584

You can use a keyframe animation:

@keyframes background-change {
    to { background-color: hotpink; }
}

.block {
    animation: background-change 900ms forwards;
}

Upvotes: 1

Stefan
Stefan

Reputation: 1

This is probably what you're looking for.

.block {
    background-color: yellow;
}

.block:hover {
    background-color: white;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

Upvotes: 0

Related Questions