Help with animated CSS

Question

So I found a cool video on youtube about creating animated leaves in CSS and have tried my best to replicate it, yet have not been entirely successful.
1. My radial-gradient background is not showing.
2. The leaves are supposed to float up and down out of the screen. But the ones floating up veer-off to the left and some of the ones floating down veer-off to the right.
(In the Code Playground this is harder to see, but when I open it with my web-browser it is much easier to see).
Could anyone help me figure out these two problems? I would be very grateful.
Here is the CSS code:
body {
margin: 0;
padding: 0;
overflow: hidden;
}
section {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
background: radial-gradient (#333, #000);
}
.set {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.set div {
position: absolute;
display: block;
}
.set div:nth-child(1) {
left: 60%;
animation: animate 15s linear infinite;
animation-delay: 5s;
}
.set div:nth-child(2) {
left: 20%;
animation: animate 20s linear infinite;
animation-delay: 7s;
}
.set div:nth-child(3) {
left: 40%;
animation: animate 25s linear infinite;
}
.set div:nth-child(4) {
left: 0%;
animation: animate 15s linear infinite;
animation-delay: 10s;
}
.set div:nth-child(5) {
left: 80%;
animation: animate 18s linear infinite;
}
.set div:nth-child(6) {
left: 15%;
animation: animate 12s linear infinite;
animation-delay: 5s;
}
.set div:nth-child(7) {
left: 55%;
animation: animate 14s linear infinite;
animation-delay: 7s;
}
.set div:nth-child(8) {
left: 90%;
animation: animate 25s linear infinite;
}
.set div:nth-child(9) {
left: 75%;
animation: animate 20s linear infinite;
animation-delay: 7s;
}
.set div:nth-child(10) {
left: 35%;
animation: animate 14s linear infinite;
}
@keyframes animate {

Answer 1

(CSS continued)
@keyframes animate {
0%
{
top: -10%;
opacity: 0;
transform: translateX(20px) rotate(0deg)
}
10%
{
opacity: 1;
}
20%
{
transform: translateX(-20px) rotate(45deg)
}
40%
{
transform: translateX(-20px) rotate(90deg)
}
60%
{
transform: translateX(20px) rotate(135deg)
}
80%
{
transform: translateX(-20px) rotate(180deg)
}
100%
{
top: 110%;
transform: translateX(-20px) rotate(225deg)
}
}
.set2 {
transform: rotateY(180deg);
filter: blur(2px);
}
.set3 {
transform: scale(0.8) rotateX(180deg);
filter: blur(4px);
}
h2 {
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
text-align: center;
color: #fff;
margin: 0;
padding: 0;
font-size: 8em;
font-family: sans-serif;
}