Creating 3d measurements with css or js - javascript

I would like to know if it is possible to create a 3d measurement somehow with css or js. So that there would be a width a height and a length. I know there is no conventional way to do this but I'm sure someone has come up with something more simple than the solutions I've been finder.
I want to know if it is possible to stack divs with different z-indexes or if there is an even better way to do this.
Here is a demo of the non-3d version of what i want DEMO
.one {
width: 300px;
height: 300px;
border-radius: 50%;
border: 20px inset #81ff14;
text-align: center;
animation: spin 3s infinite linear;
}
.two {
width: 250px;
height: 250px;
border-radius: 50%;
border: 20px outset #81ff14;
margin: auto;
margin-top: 5px;
text-align: center;
animation: spin 5s infinite linear;
}
.survive {
font-size: 36px;
line-height: 35px;
max-width: 150px;
margin: -175px auto;
font-family: 'Titillium Web', sans-serif;
font-weight: 700;
position: relative;
z-index: 0;
}
.preserve {
transform-style: preserve-3d;
z-index: 100;
position: relative;
}
.containAnimation {
height: 300px;
width: 300px;
text-align: center;
}
#keyframes spin {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
50% {
transform: rotateX(-180deg) rotateY(180deg);
}
90% {
transform: rotateX(0deg) rotateY(0deg);
}
}
And this is an example of what I want the end result to be like.

Related

CSS/JS? How to reflect a border-radius?

I try to code a little rock-paper-scissors based game and used the CSS/JS-code from this youtube tutorial to create neon buttons with a snake animation around the edges of the button.
https://youtu.be/3RRgVHd2TXQ
I then softened the edges of the buttons using "border-radius: 15px" - but the reflection has still sharp corners.
How can I solve this?
Also the snake-animation to shine around the edges of the button does not work :( - would be great to know why!?
Try the game: https://bamory.com/?hotlink=FARTWAR (click link to start a game-session and invite another player with the session-code appearing on top of the screen)
CODE:
html{
text-align: center;
}
}
body.chapter2 {
color: yellow;
}
input {
margin: 10px;
height: 50px;
width: 90%;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #050801;
flex-direction: column;
}
.button
{
border-radius: 15px;
position: relative;
display: inline-block;
padding: 10px 15px;
margin: 10px 10px;
color: #03e9f4;
font-size: 24px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: 0.5s;
letter-spacing: 4px;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
width: 25%;
}
.button:nth-child(1)
{
filter: hue-rotate(290deg);
}
.button:nth-child(3)
{
filter: hue-rotate(110deg);
}
.button:hover
{
background: #03e9f4;
color: #050801;
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 200px #03e9f4;
}
.button span
{
position: absolute;
display: block;
}
.button span:nth-child(1)
{
top: 0;
left: 0;
width: 25%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: animate1 1s linear infinite;
}
#keyframes animate1
{
0%
{
left: -100%;
}
50%, 100%
{
left: 100%;
}
}
.button span:nth-child(2)
{
top: -100px;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: animate2 1s linear infinite;
animation-delay: 0.25s;
}
#keyframes animate2
{
0%
{
top: -100%;
}
50%, 100%
{
top: 100%;
}
}
.button span:nth-child(3)
{
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: animate3 1s linear infinite;
animation-delay: 0.5s;
}
#keyframes animate3
{
0%
{
right: -100%;
}
50%, 100%
{
right: 100%;
}
}
.button span:nth-child(4)
{
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation: animate4 1s linear infinite;
animation-delay: 0.75s;
}
#keyframes animate4
{
0%
{
bottom: -100%;
}
50%, 100%
{
bottom: 100%;
}
}
Thanks for your help! (it´s my first time using JS / stackoverflow - please forgive me if I inserted too much code or did other mistakes!)
how about give up box-reflect and use transform. take look at this:
css box-reflect alternative for older browser
it's more messy but why not more to learn

How to make the button in such a way that hovering it results in the rotation and spinning of another object?

I have the following code in which the star is automatically "spinning" around the crescent and hovering it makes it "rotate". There is also a button on the left side: when it is hovered, it only changes its background-color and text-color; however, I want the star to start spinning and rotating when the button is hovered (and also want the effects of the button i.e. changing its background color and text color, to maintain simultaneously). I tried using different codes but everything I do results in messing the code up further.
<!DOCTYPE html>
<html>
<head>
<style>
body {
position: relative;
right: -500px;
bottom: -150px;
}
.moon,
.star {
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: 120%; /* Resize the background image to cover the entire container */
-moz-border-radius: 50%; /* to make circle shape */
-webkit-border-radius: 50%;
border-radius: 50%;
}
.moon {
background-color: transparent;
background-image: url("https://i.stack.imgur.com/0bcIk.png");
position: absolute;
width: 200px;
height: 200px;
margin: 50px;
}
.star {
position: relative;
background-color: transparent;
background-image: url("https://i.stack.imgur.com/gjbgR.png");
width: 100px;
height: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.moon:hover .counterrotate {
width: 50%;
height: 50%;
-webkit-animation: ccircle 10s infinite linear;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg);
}
to {
-webkit-transform: rotateZ(360deg);
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg);
}
to {
-webkit-transform: rotateZ(0deg);
}
}
.moon:hover .counterrotate {
animation-name: inherit;
animation-duration: 5s;
transition-duration: 0.2s;
}
button {
background-color: white;
color: black;
text-align: center;
padding: 16px 32px;
font-size: 16px;
cursor: pointer;
border: 2px solid green;
display: inline-block;
transition-duration: 0.3s;
position: relative;
left: -350px;
border-radius: 50px;
bottom: -100px;
}
button:hover {
background-color: green;
color: white;
display: inline-block;
border: 1px solid white;
transition: 0.5s;
}
</style>
</head>
<body style="background-color: green">
<div class="moon">
<div class="rotate">
<div class="counterrotate">
<div class="star"></div>
</div>
</div>
</div>
<button>Hover</button>
</body>
</html>
How can I do that?
If I have understood the requirement correctly, you do not need Javascript for this.
However, CSS is not currently able to style a sibling element that is before a hovered element (it can't 'go back up' the DOM). But it can style a sibling element that follows the hovered element.
So the first change is to put the button element before the moon element. Now when the button element is hovered we can select its immediate sibling using the + combinator and from there we can select the rotate and moon elements to give them the animations required for rotating and spinning. (In this case we have left the definition of rotate as it is in the code in the question and introduced the spin animation to keep the star spinning around its center).
Now when the button is hovered the star rotates (moves in a large circle) and spins (rotates about its own center).
This snippet also makes the star spin when it is hovered and doesn't have any movement when there is no hovering. Obviously you can change the styling to have what you want there. Also the counterrotation is removed and the -webkit- prefixes, just to simplify things (and you don't want -webkit- with no vanilla setting set as well as some browsers may not interpret it).
<!DOCTYPE html>
<html>
<head>
<style>
body {
position: relative;
right: -500px;
bottom: -150px;
}
.moon,
.star {
background-position: center;
/* Center the image */
background-repeat: no-repeat;
/* Do not repeat the image */
background-size: 120%;
/* Resize the background image to cover the entire container */
border-radius: 50%;
}
.moon {
background-color: transparent;
background-image: url("https://i.stack.imgur.com/0bcIk.png");
position: absolute;
width: 200px;
height: 200px;
margin: 50px;
}
.star {
position: relative;
background-color: transparent;
background-image: url("https://i.stack.imgur.com/gjbgR.png");
width: 100px;
height: 100px;
transform: rotate(0deg);
}
button:hover+.moon .star,
.star:hover {
animation: spin 5s infinite linear;
}
#keyframes spin {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
button:hover+.moon .rotate {
width: 100%;
height: 100%;
animation: circle 10s infinite linear;
}
#keyframes circle {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
button {
background-color: white;
color: black;
text-align: center;
padding: 16px 32px;
font-size: 16px;
cursor: pointer;
border: 2px solid green;
display: inline-block;
transition-duration: 0.3s;
position: relative;
left: -350px;
border-radius: 50px;
bottom: -100px;
}
button:hover {
background-color: green;
color: white;
display: inline-block;
border: 1px solid white;
transition: 0.5s;
}
</style>
</head>
<body style="background-color: green">
<button>Hover</button>
<div class="moon">
<div class="rotate">
<div class="star"></div>
</div>
</div>
</body>
</html>

Can (endless) CSS keyframe animations be stopped at certain time point or a defined keyframe?

I am trying to find out if CSS today offers enough tools to have animations run until an event tells them to stop?
Yes this is possible see snippet, however:
This animation will jump to the end if stopped in between. I was wondering if it can be stopped at any certain point of the computed keyframes. So basically like a wheel of fortune keep spinning the DIV until it's stopped and when stopped while upside down remain upside down until maybe restarted?
snippet:
#wrap {
background-color: yellow;
position: relative;
top: 0px;
width: 100px;
height: 100px;
border-radius: 50px;
box-sizing: border-box;
transition: 700ms linear;
animation-iteration-count: infinite;
}
#wrap:hover {
background-color: orange;
}
#mouth {
background-color: transparent;
position: absolute;
border-left: 4px solid black;
border-right: 4px solid black;
border-bottom: 4px solid black;
border-radius: 0 0 60px 60px;
height: 30px;
width: 60px;
top: 52px;
left: 20px;
box-sizing: border-box;
display: inline-block;
overflow: hidden;
padding: 0;
}
#left-eye {
position: absolute;
background-color: black;
border-radius: 50%;
width: 8px;
height: 16px;
box-sizing: border-box;
left: 30px;
top: 25px;
display: inline-block;
overflow: hidden;
padding: 0;
}
#right-eye {
position: absolute;
background-color: black;
border-radius: 50%;
width: 8px;
height: 16px;
box-sizing: border-box;
top: 25px;
right: 30px;
display: inline-block;
overflow: hidden;
padding: 0;
}
#keyframes rotateDiv {
from {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari */
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari */
transform: rotate(360deg);
}
}
#wrap {
animation-duration: 1200ms;
animation-name: rotateDiv;
animation-iteration-count: 0;
animation-timing-function: linear;
}
<div id='wrap'>
<div id='left-eye'>
</div>
<div id='right-eye'>
</div>
<div id='mouth'>
</div>
</div>
<input type='button' value='start' onClick="document.getElementById('wrap').style.animationIterationCount = 'infinite';">
<input type='button' value='stop' onClick="document.getElementById('wrap').style.animationIterationCount = '0';">
You can pause and resume CSS animations using animation-play-state and toggling a class:
CSS:
.paused {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
Snippet:
function pause() {
wrap.classList.add("paused");
}
function play() {
wrap.classList.remove("paused");
}
.paused {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
#wrap {
background-color: yellow;
position: relative;
top: 0px;
width: 100px;
height: 100px;
border-radius: 50px;
box-sizing: border-box;
transition: 700ms linear;
animation-iteration-count: infinite;
}
#wrap:hover {
background-color: orange;
}
#mouth {
background-color: transparent;
position: absolute;
border-left: 4px solid black;
border-right: 4px solid black;
border-bottom: 4px solid black;
border-radius: 0 0 60px 60px;
height: 30px;
width: 60px;
top: 52px;
left: 20px;
box-sizing: border-box;
display: inline-block;
overflow: hidden;
padding: 0;
}
#left-eye {
position: absolute;
background-color: black;
border-radius: 50%;
width: 8px;
height: 16px;
box-sizing: border-box;
left: 30px;
top: 25px;
display: inline-block;
overflow: hidden;
padding: 0;
}
#right-eye {
position: absolute;
background-color: black;
border-radius: 50%;
width: 8px;
height: 16px;
box-sizing: border-box;
top: 25px;
right: 30px;
display: inline-block;
overflow: hidden;
padding: 0;
}
#wrap {
animation-duration: 1200ms;
animation-name: rotateDiv;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes rotateDiv {
from {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari */
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari */
transform: rotate(360deg);
}
}
<div id = "wrap" class = "paused">
<div id = "left-eye"> </div>
<div id = "right-eye"> </div>
<div id = "mouth"> </div>
</div>
<input type = "button" value = "start" onClick = "play()">
<input type = "button" value = "stop" onClick = "pause()">
You may want to consider adjusting the animation play state rather than the iteration count. This will allow you to stop the animation at your desired point, but not reset it to the beginning.
function play() {
let target = document.getElementById('wrap')
target.style.animationPlayState = 'running'
let styles = getComputedStyle(target)
console.log(styles.getPropertyValue('animation-play-state'))
}
function pause() {
let target = document.getElementById('wrap')
target.style.animationPlayState = 'paused'
let styles = getComputedStyle(target)
console.log(styles.getPropertyValue('animation-play-state'))
}
#wrap {
background-color: yellow;
position: relative;
top: 0px;
width: 100px;
height: 100px;
border-radius: 50px;
box-sizing: border-box;
transition: 700ms linear;
animation-iteration-count: infinite;
}
#wrap:hover {
background-color: orange;
}
#mouth {
background-color: transparent;
position: absolute;
border-left: 4px solid black;
border-right: 4px solid black;
border-bottom: 4px solid black;
border-radius: 0 0 60px 60px;
height: 30px;
width: 60px;
top: 52px;
left: 20px;
box-sizing: border-box;
display: inline-block;
overflow: hidden;
padding: 0;
}
#left-eye {
position: absolute;
background-color: black;
border-radius: 50%;
width: 8px;
height: 16px;
box-sizing: border-box;
left: 30px;
top: 25px;
display: inline-block;
overflow: hidden;
padding: 0;
}
#right-eye {
position: absolute;
background-color: black;
border-radius: 50%;
width: 8px;
height: 16px;
box-sizing: border-box;
top: 25px;
right: 30px;
display: inline-block;
overflow: hidden;
padding: 0;
}
#wrap {
animation-duration: 1200ms;
animation-name: rotateDiv;
animation-iteration-count: 0;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: paused;
}
#keyframes rotateDiv {
from {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari */
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari */
transform: rotate(360deg);
}
}
<div id='wrap'>
<div id='left-eye'>
</div>
<div id='right-eye'>
</div>
<div id='mouth'>
</div>
</div>
<input type='button' value='start' onClick="play()">
<input type='button' value='stop' onClick="pause()">
Edit:
If you want to access information regarding a component's computed styles, you can use the getComputedStyle function. This will provide information within Javascript about all of an element's computed styles. The returned value from getComputedStyle can be used with the getPropertyValue function to provide information regarding a specific property.
This was very useful so far, yet the remaining question related to these answers:
I added window.getComputedStyle(wrap, null).getPropertyValue("transform") and write it to an output field. This returns the matrix state of the animation. How should the matrix be interpreted to know at what rotation degree or what keyframe it was paused? I found 4 float values in the matrix. Some values seem to be always the same as, or the negative value of one other value. So I guess I can calculate back to milliseconds with these values?
Or maybe there is a different property to read from with getComputedStyle() that makes this a bit simpler?
I have moved the snipped to a new more detailed question at: How can an animation keyframe or time offset be calculated from a CSS transform matrix?

Different animation behaviour for second background-image

I'm trying to create a sidebar menu with animations and trying to do as much as possible with css only. If it's not possible, JS / JQuery is ok as well.
My problem is, I've got a <span></span> element with two background images and I wanna have different animation behaviours for them. The first one should rotate and increase it's size according to the span's size, the second one should NOT rotate and stay with the same size as before, but should only appear after the animation has finished.
Is it possible to have kompletely different animations on one element for each background image? If yes, how?
Here's my code so far:
The list is done with an unordered list, each <li></li> should contain one menu-item
<ul>
<li>
<a class="menu-item-link" href="#"><span class="menu-item">1</span>Active or hovered Menu</a>
</li>
<li><li>
</ul>
Some CSS for it with animation keyframes
.menu-item-wrapper {
width: 500px;
clear: both;
}
.menu-item-link {
margin-left: 5px;
color: white;
text-decoration: none;
}
.menu-item {
float: left;
color: white;
text-align: center;
padding-top: 5px;
display: block;
width: 30px;
height: 30px;
background-image: url("hexagon.svg"), url("mars.png");
background-size: contain;
background-repeat: no-repeat;
}
.menu-item:hover {
animation-name: menuAnimation;
animation-duration: 0.5s;
animation-fill-mode: forwards;
color: transparent;
}
#keyframes menuAnimation {
from {
width: 30px;
height: 30px;
transform: rotate(0deg);
}
to {
width: 50px;
height: 50px;
transform: rotate(210deg);
}
}
And a Fiddle
And that's how it should look like after the animation has finished (the planet image and link text should only be visible after the animation has finished)
Do you mean something like this?
.menu-item-wrapper {
width: 500px;
clear: both;
}
.menu-item-link {
margin-left: 5px;
color: white;
text-decoration: none;
}
.menu-item {
float: left;
color: white;
text-align: center;
padding-top: 5px;
display: block;
width: 30px;
height: 30px;
position: relative;
}
.menu-item::before {
content: "";
background-color: green;
background-image: url("hexagon.svg"); /*added bg color because of the missing image*/
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 0;
left:0;
width: 30px;
height: 30px;
transition: all 0.5s ease;
}
.menu-item::after {
content: "";
background-color: red;
background-image: url("mars.png");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 0;
left:0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0s 0.5s ease;
}
.menu-item:hover::before {
animation-name: menuAnimation;
animation-duration: 0.5s;
animation-fill-mode: forwards;
width: 50px;
height: 50px;
transform: rotate(210deg);
}
.menu-item:hover::after {
opacity: 1;
}
https://codepen.io/zothynine/pen/GQQdLp
And idea is to split the element into two element using a pseudo element and then you can animate both of them separately and simultaneously:
body {
background: black;
}
.menu-item-link {
margin-left: 5px;
color: white;
text-decoration: none;
}
.menu-item {
color: white;
text-align: center;
padding-top: 5px;
display: block;
width: 30px;
height: 30px;
background-image: url("https://openclipart.org/image/2400px/svg_to_png/247374/Mars.png");
background-size: contain;
background-repeat: no-repeat;
position: relative;
}
.menu-item:before {
content:"";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index:1;
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQ4NS42ODggNDg1LjY4OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDg1LjY4OCA0ODUuNjg4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTM2NC4yNjksNDUzLjE1NUgxMjEuNDE2TDAsMjQyLjg0NEwxMjEuNDE2LDMyLjUzM2gyNDIuODUzbDEyMS40MTksMjEwLjMxMkwzNjQuMjY5LDQ1My4xNTV6IE0xMzEuOTA1LDQzNC45OTdoMjIxLjg3OCAgICBsMTEwLjkzOS0xOTIuMTUyTDM1My43ODMsNTAuNjkxSDEzMS45MDVMMjAuOTY2LDI0Mi44NDRMMTMxLjkwNSw0MzQuOTk3eiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
background-size: contain;
background-repeat: no-repeat;
}
.menu-item:hover {
animation-name: anime1;
animation-duration: 0.5s;
animation-fill-mode: forwards;
color: transparent;
}
.menu-item:hover::before {
animation-name: anime2;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
#keyframes anime1 {
from {
width: 30px;
height: 30px;
transform: rotate(0deg);
}
to {
width: 50px;
height: 50px;
transform: rotate(210deg);
}
}
#keyframes anime2 {
from {
transform: rotate(0deg);
opacity:0;
}
to {
transform: rotate(-210deg);
opacity:1;
}
}
<div class="menu-item-wrapper">
<a class="menu-item-link" href="#"><span class="menu-item">1</span>Active or hovered Menu</a>
</div>

Margin-top and Margin-bottom not applying to inner elements

I'm looking to move my spinner div upwards. Whether it's negative or positive values to move the circle to have it center on the img. It works on my CodePen but not on my Webpage. I read about some possible solutions like adding display: inline-block / display: block and overflow: hidden but they don't seem to work with my code. Why would code that works on Codepen not work on my web page?
.bodyImage1 {
float: right;
margin-right: -10%;
width: 250px;
}
.container {
position: relative;
}
/*Advance animation*/
.connector3 {
position: absolute;
display: inline-block;
margin-top: 360px;
width: 0;
height: 2px;
animation: drawConnector 0.7s;
animation-fill-mode: forwards;
background: linear-gradient(to right, #0083f5 15%, #f57300 105%);
}
.spinner1 {
align-items: center;
border: .3em solid transparent;
border-top: .3em solid #f57300;
border-right: .3em solid #f57300;
border-radius: 100%;
display: flex;
justify-content: center;
}
.spinnerOut {
animation: spinnerOne 3s linear infinite;
margin-top: -50%;
margin-left: 150%;
height: 3em;
width: 3em;
}
.spinnerMid {
animation: spinnerOne 5s linear infinite;
height: 2.4em;
width: 2.4em;
}
.spinnerInn {
animation: spinnerOne 5s linear infinite;
height: 1.8em;
width: 1.8em;
}
#keyframes spinnerOne {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
<div class="connector3 block-anim invis">
<div class="spinner1 spinnerOut invis">
<div class="spinner1 spinnerMid">
<div class="spinner1 spinnerInn"></div>
</div>
</div>
</div>
There is a margin-top: important on the spinner on your site. Changing it moves the spinner around.
Site.css, prettified, line 27301
.spinnerOut {
animation: spinnerOne 3s linear infinite;
margin-top: -225px !important;
margin-left: 150%;
height: 3em;
width: 3em;
}

Categories