Dynamic circuit animation in motion

Question

Dynamic circuit animation in motion

I have a div on my website with margins only, and I'm looking to create a cool effect when the page loads. I want it to look like there is a circuit running through the div, starting from the positive terminal (where a battery image overlaps the div) and changing color to yellow as it moves towards the negative terminal. I'm not sure if this can be done using CSS alone, but I'm intrigued by its possibilities.

Below is the code for my div tag:

#circuit {
  width: 80%;
  border: 10px solid navy;
  margin: 25px;
  height: 80%;
  margin-left: auto;
  margin-right: auto;
}
html,
body {
  height: 100%;
  margin: 0;
}

<div id="circuit"></div>

css

Answer 1

Answer №1

To achieve the desired speed, a series of keyframe animations must be utilized with modifications to the duration and cumulative delay.

Check out the live demo on Fiddle

    html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
* {
    box-sizing: border-box;
}
.circuit-outer {
    position: relative;
    width: 80vw;
    height: 80vh;
    margin: 5% 10% 0;
    padding: 3px;
    background: #eee;
    border: 1px solid #ddd;
    overflow: hidden;
}
.circuit-inner {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
    background: #fff;
    border: 1px solid #ddd;
}
.current {
    background: orange;
    position: absolute;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.current.bottom-left {
    bottom: 0;
    right: 80%;
    width: 20%;
    height: 3px;
    -webkit-animation-name: zap1;
    -webkit-animation-duration: .2s;
    animation-name: zap1;
    animation-duration: .2s;
}
.current.left {
    bottom: 0;
    left: 0;
    width: 3px;
    height: 0;
    -webkit-animation-name: zap2;
    -webkit-animation-delay: .2s;
    -webkit-animation-duration: .5s;
    animation-name: zap2;
    animation-delay: .2s;
    animation-duration: .5s;
}
.current.top {
    top: 0;
    width: 0;
    height: 3px;
    -webkit-animation-name: zap3;
    -webkit-animation-delay: .7s;
    -webkit-animation-duration: 1s;
    animation-name: zap3;
    animation-delay: .7s;
    animation-duration: 1s;
}
.current.right {
    top: 0;
    right: 0;
    width: 3px;
    height: 0;
    -webkit-animation-name: zap2;
    -webkit-animation-delay: 1.7s;
    -webkit-animation-duration: .5s;
    animation-name: zap2;
    animation-delay: 1.7s;
    animation-duration: .5s;
}
.current.bottom-right {
    bottom: 0;
    right: 0;
    width: 0%;
    height: 3px;
    -webkit-animation-name: zap4;
    -webkit-animation-delay: 2.2s;
    -webkit-animation-duration: .8s;
    animation-name: zap4;
    animation-delay: 2.2s;
    animation-duration: .8s;
}
@-webkit-keyframes zap1 {
    0% {
        width: 0;
    }
    100% {
        width: 20%;
    }
}
@keyframes zap1 {
    0% {
        width: 0;
    }
    100% {
        width: 20%;
    }
}
@-webkit-keyframes zap2 {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}
@keyframes zap2 {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}
@-webkit-keyframes zap3 {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
@keyframes zap3 {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
@-webkit-keyframes zap4 {
    0% {
        width: 0;
    }
    100% {
        width: 80%;
    }
}
@keyframes zap4 {
    0% {
        width: 0;
    }
    100% {
        width: 80%;
    }
}

<div class="circuit-outer">
  <div class="current bottom-left"></div>
  <div class="current left"></div>
  <div class="current top"></div>
  <div class="current right"></div>
  <div class="current bottom-right"></div>
  <div class="circuit-inner"></div>
</div>

Answer 2

To achieve the desired speed, a series of keyframe animations must be utilized with modifications to the duration and cumulative delay.

Check out the live demo on Fiddle

    html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
* {
    box-sizing: border-box;
}
.circuit-outer {
    position: relative;
    width: 80vw;
    height: 80vh;
    margin: 5% 10% 0;
    padding: 3px;
    background: #eee;
    border: 1px solid #ddd;
    overflow: hidden;
}
.circuit-inner {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
    background: #fff;
    border: 1px solid #ddd;
}
.current {
    background: orange;
    position: absolute;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.current.bottom-left {
    bottom: 0;
    right: 80%;
    width: 20%;
    height: 3px;
    -webkit-animation-name: zap1;
    -webkit-animation-duration: .2s;
    animation-name: zap1;
    animation-duration: .2s;
}
.current.left {
    bottom: 0;
    left: 0;
    width: 3px;
    height: 0;
    -webkit-animation-name: zap2;
    -webkit-animation-delay: .2s;
    -webkit-animation-duration: .5s;
    animation-name: zap2;
    animation-delay: .2s;
    animation-duration: .5s;
}
.current.top {
    top: 0;
    width: 0;
    height: 3px;
    -webkit-animation-name: zap3;
    -webkit-animation-delay: .7s;
    -webkit-animation-duration: 1s;
    animation-name: zap3;
    animation-delay: .7s;
    animation-duration: 1s;
}
.current.right {
    top: 0;
    right: 0;
    width: 3px;
    height: 0;
    -webkit-animation-name: zap2;
    -webkit-animation-delay: 1.7s;
    -webkit-animation-duration: .5s;
    animation-name: zap2;
    animation-delay: 1.7s;
    animation-duration: .5s;
}
.current.bottom-right {
    bottom: 0;
    right: 0;
    width: 0%;
    height: 3px;
    -webkit-animation-name: zap4;
    -webkit-animation-delay: 2.2s;
    -webkit-animation-duration: .8s;
    animation-name: zap4;
    animation-delay: 2.2s;
    animation-duration: .8s;
}
@-webkit-keyframes zap1 {
    0% {
        width: 0;
    }
    100% {
        width: 20%;
    }
}
@keyframes zap1 {
    0% {
        width: 0;
    }
    100% {
        width: 20%;
    }
}
@-webkit-keyframes zap2 {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}
@keyframes zap2 {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}
@-webkit-keyframes zap3 {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
@keyframes zap3 {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
@-webkit-keyframes zap4 {
    0% {
        width: 0;
    }
    100% {
        width: 80%;
    }
}
@keyframes zap4 {
    0% {
        width: 0;
    }
    100% {
        width: 80%;
    }
}

<div class="circuit-outer">
  <div class="current bottom-left"></div>
  <div class="current left"></div>
  <div class="current top"></div>
  <div class="current right"></div>
  <div class="current bottom-right"></div>
  <div class="circuit-inner"></div>
</div>

Answer 3

Answer №2

Would you like to achieve a similar effect? This code snippet creates a dynamic background and animates its position on hover. You can easily add a custom class when the page loads.

#circuit {
  width: 80%;
  border: 10px solid navy;
  margin: 25px;
  height: 80%;
  margin-left: auto;
  margin-right: auto;
  
  background: linear-gradient(to right, yellow 50%, blue 50%);
  background-size: 200% 100%;
  background-position:right bottom;
  transition:all 2s ease;
}
html,
body {
  height: 100%;
  margin: 0;
}

#circuit:hover {
  background-position:left bottom;
}

<div id="circuit"></div>

Answer 4

Would you like to achieve a similar effect? This code snippet creates a dynamic background and animates its position on hover. You can easily add a custom class when the page loads.

#circuit {
  width: 80%;
  border: 10px solid navy;
  margin: 25px;
  height: 80%;
  margin-left: auto;
  margin-right: auto;
  
  background: linear-gradient(to right, yellow 50%, blue 50%);
  background-size: 200% 100%;
  background-position:right bottom;
  transition:all 2s ease;
}
html,
body {
  height: 100%;
  margin: 0;
}

#circuit:hover {
  background-position:left bottom;
}

<div id="circuit"></div>

Answer 5

Answer №3

Could this be what you are seeking?

#diagram {
  position: absolute;
  width: 300px;
  height: 200px;
  margin: 5% auto;
  border:1px solid;
  
  background: linear-gradient(to right, green 50%, purple 50%);
  background-size: 150% 100%;
  background-position:right bottom;
  transition:all 2s ease;
 
}
html,
body {
  height: 100%;
  margin: 0;
}

#diagram:hover {
  background-position:left bottom;
}
.section{
background:white;
position:absolute;
top:10%;
left:5%;
bottom:10%;
right:5%;
 }

<div id="diagram"><div class='section'></div></div>

Answer 6

Could this be what you are seeking?

#diagram {
  position: absolute;
  width: 300px;
  height: 200px;
  margin: 5% auto;
  border:1px solid;
  
  background: linear-gradient(to right, green 50%, purple 50%);
  background-size: 150% 100%;
  background-position:right bottom;
  transition:all 2s ease;
 
}
html,
body {
  height: 100%;
  margin: 0;
}

#diagram:hover {
  background-position:left bottom;
}
.section{
background:white;
position:absolute;
top:10%;
left:5%;
bottom:10%;
right:5%;
 }

<div id="diagram"><div class='section'></div></div>

Dynamic circuit animation in motion

Answer №1

Answer №2

Answer №3

Similar questions

Tips for utilizing JavaScript getElementByClassName to retrieve all the elements within a ul without having to specify the class name in each li

Issue with undefined Sass variable when using Global Sass variable in Vue 3 with Vite: [sass] Undefined variable error

Why isn't Bootstrap validation functioning properly in my Modal?

Enhance Your Profile with Bootstrap 4 Dropdowns

Modify the transparency of a form's backdrop without affecting the input fields

The Label in Material UI TextField is appearing on top of the border,

How can CSS be used to change the text color of input placeholder in Edge Browser?

Struggling to create a dynamic design for a nested column using bootstrap

What is the best way to design unconventional grids using Bootstrap 4?

Increasing Gap between Tabs in Primefaces AccordionPanel: A Guide

Bootstrap 4: Embrace the seamless flow of columns with no gaps in

Comparing Yii's CHtml::link() function with the use of regular <a href=''></a> HTML tags

Utilizing an array of font styles in a single line while maintaining a consistent width

`Center the image on top of the text`

Show Struts2 error message on an HTML webpage

Adding a <span> element within an <h1> tag in WordPress

Using a video as a background in HTML

Tips for aligning column components in a vertical position

Struggling with proper vertical alignment using Flexbox and achieving center alignment

Combine collapse and popover in Bootstrap 3 for enhanced functionality