Endless cycle of changing border colors

I'm trying to achieve a specific effect where the border of a div changes colors in an infinite loop. However, I want this effect to be applied only to the border of the div and not the entire body background. Here is an example: http://jsfiddle.net/ANMPt/

@-webkit-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
}
@-moz-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
}
@-ms-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
}
body{
 -webkit-animation: blink 1s infinite;
 -moz-animation:    blink 1s infinite;
 -ms-animation:     blink 1s infinite;
}

Any ideas on how to target just the border for this effect?

Alternatively, if you have a better solution using CSS or JavaScript to create an infinite loop of changing border colors, I would love to hear it!

Thank you in advance!

javascriptcsscss-animations

Answer №1

Instead of applying it to the body, try implementing it for the div

div {
     -webkit-animation: blink 1s infinite;
     -moz-animation:    blink 1s infinite;
     -ms-animation:     blink 1s infinite;
}

Fiddle: http://jsfiddle.net/praveenscience/ANMPt/160/

If you intend to use it for the border effect, then target border-color instead of background!

@-webkit-keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}
@-moz-keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}
@-ms-keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}
div {
     -webkit-animation: blink 1s infinite;
     -moz-animation:    blink 1s infinite;
     -ms-animation:     blink 1s infinite;
     border: 2px solid;
}

Fiddle: http://jsfiddle.net/praveenscience/ANMPt/167/

Answer №2

Try animating the border-color property instead of the background:

@keyframes blink {
    0%   { border-color: red; }
    50%  { border-color: green;}
    100% { border-color: red; }
}
body {
    border: 15px solid;
    animation: blink 1s infinite;
}

Remember to add vendor prefixes for compatibility with some browsers

Check out the Demo!

Answer №3

http://jsfiddle.net/ANMPt/162/

Modify the code to change the border-color.

            @-webkit-keyframes blink {
                    0%   { border-color:red; }
                    50%  { border-color:green;}
                    100% { border-color:red; }
            }
            @-moz-keyframes blink {
                    0%   { border-color:red; }
                    50%  { border-color:green;}
                    100% { border-color:red; }
            }
            @-ms-keyframes blink {
                    0%   { border-color:red; }
                    50%  { border-color:green;}
                    100% { border-color:red; }
            }
            body{
                 -webkit-animation: blink 1s infinite;
                 -moz-animation:    blink 1s infinite;
                 -ms-animation:     blink 1s infinite;

                 border: 20px solid red;  /* border needs to be specified for animation */

                 height: 200px; / * displayed for visual demonstration */
            }

Answer №4

Implement this code on the appropriate property (border-color instead of background) and target the correct element (using a class selector so the effect can be applied to any element rather than just divs).

Remember to always include the default @keyframe syntax at the end, in addition to the prefixed ones.

See Demo

HTML

<div class="animatedBorder"></div>

CSS

@-webkit-keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}
@-moz-keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}
@-ms-keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}
@keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}

.animatedBorder{
     -webkit-animation: blink 1s infinite;
     -moz-animation:    blink 1s infinite;
     -ms-animation:     blink 1s infinite;
}

div.animatedBorder{
    margin: 20px;
    width: 100px;
    height: 100px;
    border: 5px solid transparent;
}

Answer №5

A Different Approach involves Animating the border-color as opposed to the background

Should you wish to implement this effect on a div element,

simply insert a div within the body

then update the CSS property from background to border-color

View Demo

@-webkit-keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}
@-moz-keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}
@-ms-keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}
div{
    border:2px solid;
    width:200px;
    height:200px;
     -webkit-animation: blink 1s infinite;
     -moz-animation:  blink 1s infinite;
     -ms-animation:   blink 1s infinite;
}

Answer №6

@-webkit-keyframes pulse {
        0%   { border-color:blue; }
        50%  { border-color:yellow;}
        100% { border-color:blue; }
}
@-moz-keyframes pulse {
        0%   { border-color:blue; }
        50%  { border-color:yellow;}
        100% { border-color:blue; }
}
@-ms-keyframes pulse {
        0%   { border-color:blue; }
        50%  { border-color:yellow;}
        100% { border-color:blue; }
}
section{
    border:solid 1px blue;
     -webkit-animation: pulse 1s infinite;
     -moz-animation:    pulse 1s infinite;
     -ms-animation:     pulse 1s infinite;
}

Answer №7

Substitute every instance of background with border-color and apply them to your div element rather than the body.

You may need to set a border for the div initially (such as #000000 1px solid) in order to animate it.

Answer №8

http://jsfiddle.net/ANMPt/165/

To create a blinking effect, modify the animation definitions as follows:

    0%   { border-color:red; }
    50%  { border-color:green;}
    100% { border-color:red; }

Also, ensure to set a border for your div element:

#myDiv{
    height: 300px;
    width:300px;
    border-width:5px;
    border-style:solid;
     -webkit-animation: blink 1s infinite;
     -moz-animation:    blink 1s infinite;
     -ms-animation:     blink 1s infinite;
}

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 transfer a PHP string to JavaScript/JQuery for use in a function?

Within my PHP code, I have the following: $welcome = "Welcome!"; echo '<script type="text/javascript">addName();</script>'; Additionally, in my HTML/script portion: <a id="franBTN"></a> <script type="text/javascript ...

javascriptphphtmljquery

Ways to halt a message callback?

Looking at some lines of code from a canvas sprite animation on GitHub, I am curious about how to stop the animations once the sprite has finished. window.requestAnimFrame = (function(callback) { // Function for handling animation frames return window.r ...

javascriptcallbackhtml5-canvas

Changing the className of buttons based on user interaction

I'm looking to create a function in React JS that changes the button's color when clicked. Specifically, I want the color of the button to change upon clicking. I have attempted to achieve this using the following code: {"classname" i ...

javascriptreactjs

Is there a different way to retrieve data in Node.js instead of using mysqli

<?php $connect = mysqli_connect('localhost', "root", "", "test"); if(!$connect){ die(mysqli_connect_error()); } $sql = "SELECT * FROM articles"; $result = mysqli_query($connect, $sql) or die ...

javascriptphpmysqlnode.jsexpress

Notification fails to display following POST request

Whenever the select menu displays "Please select your country" and I click the checkout button, an alert pops up. But if I select Canada, then go back to selecting "Please select your country" and press checkout, no alert appears. I need the alert to alway ...

javascriptphpjqueryhtml

What is the best way to compare two arrays in my JSON data?

Hello, I'm trying to compare two arrays - one from my JSON data and the second from a regular array. Specifically, I want to check if the ids of "cm:taggable" exist in my secondArray. JSON { "entry": { "isFile": true, "createdByUs ...

javascriptnode.jsarraysmongodbmongoose

Directing users to varying pages based on a particular criteria

As we continue to develop our application, we are creating various pages and need to navigate between them. Our current framework is Next.js. The issue we are facing involves the Home page: when transitioning from the Home page to another page (such as pa ...

javascriptreactjstypescriptnext.js

Interacting with touch events in JavaScript on Android devices

I am facing an issue with my HTML page where a div is meant to function as an on-off switch momentarily. The functionality I have implemented looks like this: $('#btn').mousedown(function() { startAction() }) $('#btn ...

javascriptjqueryandroidmobilewebkit

Using Hapi & Async for your API - How can you clear an array or execute a function immediately after sending a "reply" or at every new "get" request?

In the midst of developing a small API that retrieves data, performs tasks on it asynchronously, stores some of this data in an array using push, and then presents it to a client through Hapi's reply(). My goal is to clear out the array (e.g., using ...

javascriptnode.jshapi.jsasync.js

Utilizing ReactJS for Web Development with Enhanced Data Insights from Google

Utilizing Google Analytics and various tools, I've encountered an issue with the development of ReactJS. My goal was to collect analytics data from my website by using react-helmet to dynamically change the title and the HTML lang parameter based on t ...

javascriptreactjsgoogle-analyticsbuild

"How to retrieve the height of an element within a flexslider component

I need some assistance with using JavaScript to determine the height of an element within a flexslider. There are two challenges I am facing. When I attempt to use a regular function getHeight(){ var h = document.getElementById("id-height").style.height; ...

javascriptjqueryhtmlcssflexslider

The variable 'firebase' is nowhere to be found

I am encountering an issue with the error message 'Can't find variable: firebase' and I am struggling to identify the cause of this error. I have installed firebase using 'yarn add firebase' and double-checked that it is properly i ...

javascriptfirebasevue.jsnuxt.js

Inject the error into the Router in Express.js, utilizing Node.js

Is it possible to pass an error into an express.js Router? The express.js documentation does not provide a clear answer regarding passing errors in relation to middleware, routers, and error handling (I am unable to include links as I lack reputation). I ...

javascriptnode.jsexpress

Utilize Ag Grid to selectively apply borders between grouped values

I have included my Plunker link: [https://plnkr.co/edit/lnF09XtK3eDo1a5v] Is there a way to add borders between different group values? For example, in this case, 'country' is the group and when all rows for United States are completed, can we a ...

javascriptreactjsag-gridag-grid-angularag-grid-react

Issues with the navigator.contacts.find function occurring when using cordova or phonegap

I am attempting to retrieve the contacts stored on a mobile device. The code snippet I am using is not functioning as expected - specifically, the navigator.contacts.find method isn't producing any outcomes. There are no error messages or success conf ...

javascriptandroidcordovaandroid-contactscontacts

What is the best method for animating a display table to none or reducing its height to

My goal is to animate a header whenever the class collapseTest is applied. After some trial and error, I have come up with the following solution: http://jsfiddle.net/robertrozas/atuyLtL0/1/. A big shoutout to @Hackerman for helping me get it to work. The ...

javascriptcssanimation

Improving Three.js performance for a single, substantial model

I am currently developing a hybrid file browser and 3D model viewer. My goal is to seamlessly load models of various formats, specifically .OBJ files, into the scene while maintaining a smooth framerate with the help of orbitControls.js. Most of the optim ...

javascriptthree.js

Dynamically changing the borders of WebGL canvases: a guide to adding and

Here is my code snippet for creating an HTML canvas: <canvas id="glCanvas" class="canvases" width="20" height="20></canvas> To set the color, I am using the following: gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); I am w ...

javascripthtmlcssborder

Is it possible to achieve this shaded gradient effect using CSS3?

Check out this image for reference. I've managed to style a horizontal rule using SVG as the background image, creating a specific effect. However, I am struggling to achieve the same result using CSS3 alone. If there are any CSS experts who can adv ...

htmlcss

Coordinating Multiple Angular $http Requests using $q and Managing Errors with $q.catch

Struggling with understanding the correct utilization of Angular's $q and JavaScript's promise API. As a newcomer to Javascript, it's possible I'm making a syntax error. This question appears similar, but isn't an exact duplicate. ...

javascriptangularjsasynchronous