Animating Brightness and Contrast in CSS

I come from a strong background and I am looking to create a dynamic loop that changes the brightness using CSS specifically on Chrome. The goal is to have the background color match the user's profile, providing a unique experience each time.

For example: The background could begin as red, transition to a pinkish hue, and then return to red after a brief moment.

Another scenario: The background might start as blue, shift to a softer baby blue shade, and revert back to the original blue after a short interval.

I understand that adjusting the brightness and contrast of the color can achieve the desired effect, but implementing this with webkit is where I face some challenges.

Is there a way to alternate the brightness and contrast through CSS utilizing webkit?

css

Answer №1

UPDATE: Achieving a pink color through animating brightness and contrast is possible, but the method may not be straightforward. 

It's important to note that filters require the prefix -webkit-

@keyframes example {
    0%   {
        filter: brightness(1);
        filter: contrast(1);
        -webkit-filter: brightness(1);
        -webkit-filter: contrast(1);
    }
    50%  {
        filter: brightness(0.4);
        filter: contrast(0.4);
        -webkit-filter: brightness(0.4);
        -webkit-filter: contrast(0.4);
    }
    100% {
        filter: brightness(1);
        filter: contrast(1);
        -webkit-filter: brightness(1);
        -webkit-filter: contrast(1);
    }
}

Access the Fiddle here

Instead of using brightness and contrast, consider tweening between colors for similar effects.

div {
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes example {
    from {background: red;}
    to {background: pink;}
}

Check out the Fiddle for this alternative approach

If you prefer a seamless loop without any blinking effects:

@keyframes example {
    0%   {background: red;}
    50%  {background: pink;}
    100% {background: red;}
}

View the updated Fiddle here

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

What is the best way to reposition an element to the end of its flexbox container?

I have a flexbox-container that contains multiple details-elements with flex-wrap behavior. My goal is to have a details-element move below the other elements within the container when it is opened. For example, I want it to go from this initial layout: ...

javascripthtmlcssflexboxhtml-tag-details

How can I display two different styles on a single page in ASP.NET MVC without any conflicts between CSS classes?

Currently, I am developing a web-based application that is capable of generating documents containing specific data. A new functionality has been introduced in the document generator, allowing users to input an Atlassian Confluence link into a designated t ...

c#htmlcssasp.net

Error 403 with Firefox on Font Loading for CodeIgniter Website

Utilizing font-face in CSS to integrate custom fonts onto a web application being developed with CodeIgniter. This is the CSS code: @font-face { font-family: 'UniversLT-UltraCondensed'; src: url('../Fonts/LTUnivers/universlt59ultrac ...

phpcsscodeigniterfirefoxhttp-status-code-403

Exploring and Modifying CSS Styles in Element Properties

Struggling to remove a 50px gap on my website. It's built on Joomla 1.5 and the white space is highlighted in orange below. When I inspect element using Chrome, it shows a margin-bottom: 50px but doesn't specify the location. Any tips on how to ...

htmlcss

Setting the height of a webpage element to match the height of the window through CSS

How can I make the .Bck div stretch to the full height of the browser window? I attempted using jQuery, but the height doesn't adjust correctly when I resize the window. What is wrong with my JavaScript and can this be achieved with CSS alone? <!- ...

jqueryhtmlcss

ways to utilize inline styling in react using javascript

When repurposing an array of React components, I am looking to modify the inline styles generated with them. How can I access and log the inline styles of a React component? UPDATE: see the code snippet below: const pieces = this.props.pieces.map((decl, ...

javascripthtmlcssreactjs

The Jquery UI confirmation dialog is working flawlessly on the Fiddle platform, but it is not displaying correctly on the

After testing this code snippet on a fiddle and seeing it work perfectly, I attempted to implement it on my website only to find that there is no border appearing, and the layout appears disorganized. Even after removing all the CSS styles and inspecting ...

jqueryjquery-uicss

Issue with PHP page not properly connecting to the recently updated CSS file

Yesterday, I successfully linked my CSS in the head tag right below the title tag using this code: <link href="css/main.css" rel="stylesheet"> Yesterday, everything was working fine with the styles. However, today when I try to add new styles, the ...

phphtmlcss

Ways to navigate private property using the App Component in Angular 4

I have successfully implemented code in my app component to retrieve the current URL and display it in app.component.html. app.component.ts import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Compone ...

javascriptjqueryhtmlcssangularjs

Center Align Images in HTML List Items

Hey there! I'm currently diving into the world of web development with responsive design, but I'm still a bit of a newbie. So please bear with me as I try to explain my issue in detail. If you need more information, just let me know! My current ...

javascriptjqueryhtmlcss

Styling images and text in CSS within a jQuery UI autocomplete widget

I am currently using an autocomplete widget that displays text along with images. The results I have right now are not meeting my requirements. I want to customize the appearance of my results so that the words 'test' and either 'Federico&a ...

javascripthtmlcssjquery-ui

Placing a Div element outside of a Flexible Grid Layout

I am currently in the process of developing a responsive website using HTML5, CSS3, jQuery, and Media Queries. One challenge I am facing involves a page containing a gallery of images within a 16-column grid that adjusts nicely for various screen sizes, i ...

jqueryhtmlcssresponsive-designposition

Looking for CSS templates for improving your business web apps?

Many CSS templates out there are fixed-width, typically around 900 pixels wide... Right now, I'm in the process of creating an intranet Rails application and I'm seeking a good resource for CSS templates designed specifically for business applic ...

ruby-on-railscss

Is it possible to adjust the height of input fields in MUI Reactjs?

Having trouble adjusting the height of input textfields using in-line css. <FormControl sx={{ "& .MuiOutlinedInput-notchedOutline": { borderColor: "blue", }, "&.Mui-focused .MuiOutlinedInpu ...

cssreactjsmaterial-ui

Learn how to assign an image to a div element when it is collapsed, and then reveal the content when clicked on to expand

I am working on a three div with expand collapse functionality. When I expand one div, I want to set some image to the other divs. And when I go back to normal mode, I need the original content that was inside each div. $("a.expansion-btn").click(functi ...

javascriptjqueryhtmlcssangularjs

design and construct a three-dimensional shelving unit

After much searching and failed attempts, I am determined to create a stationary cube-shaped bookcase using CSS. Can anyone offer some guidance on how I can achieve this? I have included an image of the design I want to replicate. Thank you .scene { ...

htmlcss

Compiling 'react-scripts' to include a few images as data URIs within the CSS file

I have recently inherited a sizable React project, even though my experience with React is limited. Nonetheless, I am attempting to make improvements in areas where I feel confident. An ongoing issue we are facing is the excessive size of our main CSS fil ...

cssreactjsoptimizationnpmsass

What is the most effective way to add images to a table using JavaScript?

Is there a way to insert images into the "choicesDiv" without having to make changes to the HTML & CSS? Here is the table code: <table id="choices"> <tr> <td><div class="choicesDiv" value="1"></div></td> ...

javascriptjqueryhtmlcss

Is there additional cushioning beneath an image within a div element?

It appears that my div containing an image has extra padding at the bottom for some unknown reason. You can view the JSFiddle here: http://jsfiddle.net/KSs7V/ Any suggestions on how this padding might have been added and how to correct it? CSS: .artist ...

htmlcss

Arrange the contents within a div with Bootstrap 4 for proper alignment

Just stepping into the world of front end development and my question might come off as quite basic. Currently, I am delving into ReactJS. https://i.sstatic.net/o9tDo.png My current challenge is related to the following code snippet: <div className=" ...

htmlcsstwitter-bootstrap-3bootstrap-4