I am attempting to implement a CSS animation using three files. Below is the HTML file:
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" class = "tag" href="../css/style.css">
</head>
<body>
<script type="text/javascript" src="main.js"></script>
<!-- header => class => id => inline style-->
<div class="main-content">
<h2>HELLO WORLD</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros,
pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus.
Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex,
in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Duis pharetra luctus lacus ut
vestibulum. Maecenas ipsum lacus, lacinia quis posuere ut, pulvinar vitae dolor.
Integer eu nibh at nisi ullamcorper sagittis id vel leo. Integer feugiat
faucibus libero, at maximus nisl suscipit posuere. Morbi nec enim nunc.
Phasellus bibendum turpis ut ipsum egestas, sed sollicitudin elit convallis.
Cras pharetra mi tristique sapien vestibulum lobortis. Nam eget bibendum metus,
non dictum mauris. Nulla at tellus sagittis, viverra est a, bibendum metus
</p>
</div>
<div id="bounceLeft"></div>
</body>
</html>
Next, I have the JavaScript file...
setInterval(()=>{
document.getElementsByClassName("main-content")[0].setAttribute("width", window.innerWidth);
document.getElementsByClassName("main-content")[0].setAttribute("height", window.innerHeight);}
, 1000);
Lastly, here is the CSS file.
@keyframes colChange{
0% {background-color: red;}
33% {background-color: rgb(0, 38, 255);}
66% {background-color: rgb(20, 192, 72);}
100% {background-color: red}
}
@keyframes bounceLeft{
0%{left: calc(attr(data-width)/2-230); top:0px;}
50%{left: calc(attr(data-width)/2-200); top:attr(data-height);}
100%{left: calc(attr(data-width)/2-200); top:0px;}
}
.main-content{
height: 300px;
width: 400px;
margin: 0 auto;
background: linear-gradient(360deg, rgba(255,0,0,0.5), rgba(255,0,0,0));
outline-width: 7px;
outline-color: yellow;
outline-style: outset;
}
.main-content{
height:auto;
}
#bounceLeft{
position: relative;
width: 25px;
height: 25px;
border: solid white;
animation-name: bounceLeft;
animation-duration: 4s;
animation-iteration-count: infinite;
}
div :hover{
outline-style: dashed;
}
body{
animation-iteration-count: infinite;
animation-name: colChange;
animation-duration: 10s;
}
p{
text-align: center;
color: rgb(214, 161, 16);
}
h2{
text-align: center;
}
The issue I encountered is that the div is not moving at all. Upon inspection, I discovered that the attr() function in the CSS was not functioning correctly, but I am unsure of how to resolve it. I aim to create an animation where the div bounces vertically on the screen next to the placeholder text. Here is a screenshot of the assumed error pic of error
EDIT: The desired object for bouncing is the white box