My goal is to have my elements gracefully fade in with 2 lines extending out of a circle, one to the left and one to the right.
However, I am struggling to achieve this. Every time I attempt to display the lines, it ends up shrinking the entire design. My objective is to keep the circle centered and have the lines (container) gradually expand.
I have already tried setting it to absolute positioning, but that didn't solve the issue :\
To see the current state of the code, visit: Codepen.io
If you want to create a smooth CSS3 animation without adding different classes for each element, you can utilize pseudo selectors :before and :after.
.container{
width:200px;
height:auto;
text-align:center;
position:relative;
top:10px;
}
.container > span{
display:block;
position:relative;
}
.container:before{
content:'';
position:absolute;
width:10px;
height:10px;
background:blue;
z-index:9;
top:-10px;
border-radius:50%;
animation:opt 2s ease forwards;
opacity:0;
}
.container:after{
content:'';
position:absolute;
width:10px;
height:10px;
background:blue;
z-index:9;
bottom:-12px;
border-radius:50%;
animation:opt 2s ease forwards;
opacity:0;
}
@keyframes opt{
from{
opacity:0;
}
to{
opacity:1;
}
}
.container > span:before{
content:'';
position:absolute;
width:0px;
height:2px;
background:#111;
z-index:7;
bottom:-10px;
right:50%;
transform:translate(0,-50%);
transition:1s ease;
animation:wdth 2s ease forwards 1s;
}
.container > span:after{
content:'';
position:absolute;
width:0px;
height:2px;
background:#111;
z-index:7;
top:-5px;
left:50%;
transition:1s ease;
animation:wdth 2s ease forwards 1s;
}
@keyframes wdth{
from{
width:0px;
}
to{
width:50px;
}
}<div class="container">
<span>Ghaleon Games</span>
</div>Welcome! This is my HTML code: <div style="width:220px;float:left;" id="radio_text"> <ul style="width:20px;float:left;display:block;"> <li style="list-style:none;line-height:13px;height:13px;float:left;"><input type="radio ...
I'm currently using @angular/animations module to animate HTML objects and I want to move an object when a button is clicked. For example: * The object initially has top: 800px, left: 800px * Clicking the 'W' button should move the obje ...
Currently, I am working on a web application. One of the screens, screen-1, consists of a series of buttons labeled 'Code'. When a user clicks on any of these buttons, it loads a different HTML page, screen-2, in the ng-view using $location.path( ...
I've been attempting to accomplish something without success. The image below should speak a thousand words. My goal is to position div 3, located in div 2, perfectly centered between div 1 and 2 to achieve the desired outcome: Here's my HTML a ...
Struggling to style the header of a datatable in my Angular project using PrimeNG components. Despite trying various solutions, I am unable to override the existing styles. Even attempting to implement the solution from this PrimeNG CSS styling question o ...
I am having difficulty with hiding and showing table columns using checkboxes. I need to eliminate the Mars column (in bold) along with its corresponding data (also in bold). Once the Mars column is removed, I want the Venus column and its data values to ...
I have implemented ng-idle in my application, where the warning popup appears after 10 seconds with the message: "Your session will be close in 10 seconds" However, I need to change this to minutes. The session should be closed in 5 minutes instead. How ...
I am trying to solve a problem with creating a link that will take me to a specific part of the page while taking into account the height of the navbar. The issue is that since the navbar is fixed to the top with a solid color, it ends up covering part of ...
We are currently implementing a variety of custom fonts with different weights for various purposes. With our entire stack now using Material UI with JSS theming and styling, we aim to eliminate the remaining .scss files in our folder structure. All the f ...
I am currently working with the following CSS code: #masthead { transition: left linear 0.25s; -moz-transition: left linear 0.25s; -o-transition: left linear 0.25s; -webkit-transition: left linear 0.25s; -ms-transition: left linear 0.2 ...
I need help aligning the text "Monitoring Engineering Dashboard" to the right side of the image in the top-left corner. Currently, it is positioned below the image (Refer to the image below) <div style="width:1200px; margin:0 auto ...
I am in the process of creating a fixed-top navigation bar for my webpage. However, I have encountered an issue where there is excessive space between the "Brand" name and the collapsed menu icon when viewed on smaller screens. Here is a visual representa ...
After exploring various solutions to fix an issue, I've hit a roadblock. Adding CSS and jQuery code seemed promising at first, but upon refreshing the browser, a new problem emerged. The parent element retained its hover state background color, but th ...
My challenge is to create a circular div element that is wider than the mobile screen and perfectly centered. This circular div needs to be an exact circle, specifically targeted for mobile screens. I've attempted to achieve this using the code in th ...
While exploring shiny dashboard, I came across this link that explains how to modify colors in the sidebar and header. However, I'm struggling to change the font color for sidebar items. The default white font color becomes unreadable when using light ...
When viewing the html code below, it appears as two columns in Opera and IE10, but only one column in Chrome, Safari, and Firefox. Can anyone explain why this is happening? The styling code [ body{column-count: 2} ] seems to only be effective in Opera and ...
After running the following code below, it appears that the linear gradient is not functioning properly in IE6 to IE8. background-image: linear-gradient(45deg, white 0%, gray 50%, black 100%); I attempted to resolve this issue by adding the code snippet ...
My boss was supposed to train me this year on demandaware knowledge, but ended up quitting, leaving me in the dark. I am scheduled to attend workshops later this year, but for now I am relying on Google and stackoverflow for guidance. Currently, I am wor ...
Due to time constraints, I decided to save some time by utilizing a CSS template called Horizons created by Templated. This particular CSS template uses Javascript to adjust the layout for mobile devices, causing buttons to switch from inline to block for ...
In my project, I am utilizing a combination of html2canvas, canvg, and jspdf to convert HTML content (which includes SVG graphs) into canvases for the purpose of creating a PDF file. To address some page-break issues, I have resorted to creating multiple c ...