As a beginner in the world of programming, I am facing some challenges with my animation. The struggle lies in the fact that only my "Treats" are moving and not the "Tricks". Any guidance or suggestions would be greatly welcomed as I might have jumped into something slightly beyond my current abilities. :)
section {
width: 900px;
margin: 0 auto;
font-size: 35px;
text-align: center;
color: #8ac30c;
text-shadow: 3px 3px 0 #4c004c, -1px 1px 0.5em #4c004c, 1px -1px 0.5em #4c004c, -2px -2px 0 #4c004c;
}
section ul {
list-style: none;
}
.tricks {
float: left;
}
.treats {
float: right;
}
/*text animation*/
.moving {
font-size: 70px;
animation: move 8s infinite;
}
@keyframes move {
from {
margin: 50px;
}
5% {
transform: rotate(10deg);
}
25% {
margin-right: 30px;
}
45% {
margin-right: 50px;
}
60% {
margin-left: 160px;
transform: rotate(-10deg);
}
75% {
margin-left: 160px;
}
to {
margin: 50px;
}
}<section>
<div class="tricks">
<h1 class="moving">Tricks</h1>
<ul>
<li>Ghoslty Musical Chairs</li>
<li>Pin the Tail on the Black Cat</li>
<li>Mummy Wrap</li>
<li>Bob for Apples</li>
<li>Carve Jack-O-Lanterns</li>
</ul>
</div>
<div class="treats">
<h1 class="moving">Treats</h1>
<ul>
<li>Chocolate Mice</li>
<li>Spider Cider</li>
<li>Caramel Apples</li>
<li>Mud and Worms</li>
<li>Monster Eyes</li>
</ul>
</div>
</section>