changing background color smoothly in a short time without using JQuery

Check out this link for some code

.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'm looking to change the yellow background color over time using only CSS. There are jQuery solutions on StackOverflow, but I want a CSS-only solution that works across all browsers.

I tried using this resource, but the color reverts back. How can I make the new color permanent?

htmlcss

Answer №1

Make sure to incorporate the following updated code. Simply insert 'animation-fill-mode: forwards' to halt the animation once it has finished.

.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;}
}

Answer №2

To achieve a cool visual effect, try incorporating a keyframe animation:

@keyframes color-transition {
    to { background-color: lightblue; }
}

.element {
    animation: color-transition 1s forwards;
}

Answer №3

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

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



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

This CSS code will smoothly transition the background color of an element from yellow to white and back to yellow, creating a visually appealing effect that repeats infinitely.

Answer №4

Here is the solution you've been seeking.

.element {
    border: 1px solid blue;
}

.element:hover {
    border: 2px solid red;
    -webkit-transition: border-color 500ms ease-in-out;
    transition: border-color 500ms ease-in-out;
}

Answer №5

give this code a shot

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Should servlet response be HTML for use in AJAX calls?

I am currently in the process of developing a web application with multiple pages, including index.html which serves as the main page and contains various <a> tabs linking to different Servlet pages. As part of my design, I have a consistent CSS lay ...

javacssajaxservlets

Ways to activate javascript following a PHP submission?

It's a bit tricky to explain. function m(val){ var element=document.getElementById('othermethod'); if(val=='others') element.style.display='block'; else element.style.display=&apo ...

javascriptphphtml

Chrome Experiencing Issues with Nested Divs

Having an issue with nested divs in Chrome <div id="wrapper"> <div id="content"> </div> </div> The wrapper div acts as a bordered container, forming a box. In Safari and Firefox, the content sits inside this box consistentl ...

htmlcssgoogle-chrome

What is the best way to transfer an element and all its children to another div without losing any jQuery functionality?

At first, sharing an example of the JavaScript and HTML from my page is challenging because I couldn't make it work on JSfiddle. The issue I'm facing involves jQuery on a page where I've created two tabs. Essentially, it's the same con ...

javascriptjqueryhtmlcssdom

Setting constraints for table size with min-width and max-height

I have a coding dilemma involving the min-width and max-height properties in my table. The issue arises when I try to set these properties on the td element – they are being ignored by the browser. If I nest a div with the properties inside a td, the con ...

htmlcsshtml-table

Valid ways to ensure that a CSS image expands outside the boundaries of the containing div

I have inserted an image using the following CSS code: .imgtemp { float:right; top:0px; left:0px; overflow:visible; width:100%; } Although I have added the div tag to display it on the page, ...

htmlcss

Tips for creating a stylish navbar with a faded effect on the right side and integrating a fresh button into its design

I'm looking to enhance my Navbar by implementing a feature where, if the width of the Navbar exceeds that of its parent div, it will fade on the right side and a new button will be added - similar to what can be seen on Youtube. 1- When the Navbar&ap ...

javascripthtmlcssvue.jsbootstrap-4

Stylish CSS Effects on Hover

I'm currently in the process of developing a website and I would like to enhance my buttons with a hover effect that involves loading another image or button with a slightly different color scheme. These new images have been created in Photoshop. How ...

htmlcsshovereffects

Extracting textual information from Wikipedia through iframes?

Currently, I am working on a website project utilizing Squarespace. This site will feature multiple pages dedicated to individuals who have reached a level of notability worthy of having their own Wikipedia page. With over 150 pages planned, manually writi ...

javascripthtmlcssiframewikipedia

Include a tooltip on every image by utilizing the title attribute

<br><img title="Cool as ninja!" src="/images/profile2.png" width="300"></br> <br> <strong>Who's this pretty girl ninja!?</strong> <br><img title="Cool dude bro!" src="/images/profile5.png"></br> & ...

htmlcss

How can one transfer information from a client to a server and complete a form using JavaScript?

Can the information be transferred from a client to the server using just JS, then fill out a form on the server, and finally redirect the client to view a pre-filled form? I am considering utilizing AJAX to send a JSON object, but unsure if it will be s ...

javascriptphphtmlajaxjson

Minimize the styling of the input placeholder CSS

Here is the CSS I am using: #login-box ::-webkit-input-placeholder { color: #666; } #login-box :-moz-placeholder { color: #666; } #login-box ::-moz-placeholder { color: #666; } #login-box :-ms-input-placeholder { color: #666; } I attem ...

css

Attempting to modify the background hue of a grid component when a click event is triggered

I am struggling with the syntax to change the color of an element in my grid when clicked. I have attempted different variations without success. Being new to JavaScript, I would appreciate some gentle guidance if the solution is obvious. JS const gri ...

javascripthtmlcss

The response contains a JSON object with the values [object, Object]

I am attempting to showcase JSON data in an HTML table. Here is the code I have been using: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ ...

phphtmljson

choose to display on mobile devices as a dropdown menu rather than a modal window

On mobile devices, my select elements are currently displayed as modals with options. However, I need to change this appearance to resemble the dropdown list view observed on desktop devices. Your assistance is greatly appreciated. ...

htmlcssangular

How can I set a background image to automatically adjust to the width of the window, be full height, allow for vertical scrolling, and

How can I set a full-screen background image that adjusts to the body width without horizontal scrolling, maintains height proportionate to width, and allows for vertical scrolling? Here is my current code: html, body { margin: 0px; padding: 0px; } bo ...

javascriptjqueryhtmlcss

Incorporate a CSS framework into the Angular vendor bundle

My current situation : The website is built with Angular 4 Started using Angular Starter Kit Utilizing Semantic UI as the CSS framework The challenge I'm facing : Integration of Semantic UI into webpack is not having any impact. Steps I've ...

cssangularwebpack

How can I retrieve the offset top of a td element in relation to its parent tr element?

Here is some sample dummy HTML code: <table> <body> <tr> <td id="cell" style="height: 1000px; width: 200px;"></td> </tr> </body> </table> I am looking to attach a click event ...

javascriptjqueryhtmlcss

Utilize Mapbox-GL.JS to animate several points along designated routes

I'm encountering issues with the following example: Animate a point along a route My goal is to add another point and routes in the same map container. Here's what I've tried so far: mapboxgl.accessToken = 'pk.eyJ1IjoicGFwYWJ1Y2t ...

javascripthtmlmapsmapboxmapbox-gl-js

Is there a way to keep the text animation going even when I'm not hovering over it with the cursor?

Is there a way to make text continue animating on the page even when the cursor is not placed on it? I understand the hover function, but how can I ensure the text keeps animating without interruption? $(document).ready(function () { $("#start&q ...

javascripthtmljquerycss