Olá, Marcelo, como vai?
Nesse ponto da aula, a ideia principal não é criar novos elementos, mas sim reutilizar o que você já animou e controlar o comportamento das keyframes ao longo do tempo. O que está acontecendo no seu caso é que, ao adicionar uma nova keyframe, o After está interpolando entre os valores, fazendo com que o background diminua de forma contínua, quando na verdade você precisa de um momento de “pausa” antes da mudança.
Para conseguir esse efeito, você pode trabalhar com duas keyframes com o mesmo valor para segurar o estado do objeto. Por exemplo, imagine que o seu background está com escala em 100% no segundo 1. Se você quer que ele fique parado até o segundo 3, você mantém a keyframe de 100% no segundo 1 e cria outra keyframe também com 100% no segundo 3. Isso faz com que não haja mudança nesse intervalo. A partir do segundo 3, você cria uma nova keyframe com, por exemplo, 0% ou 80%, e aí sim ele começa a diminuir.
Sobre as formas mudando de lado, o princípio é o mesmo. Você não precisa criar novas formas. Basta animar a propriedade de posição. Por exemplo, se um elemento está à esquerda no segundo 1 e você quer que ele vá para a direita no segundo 4, você define uma keyframe de posição no início e outra no tempo desejado com o novo valor. Se quiser que ele fique parado antes de ir, repete a posição em duas keyframes, assim como no exemplo do background.
Espero ter ajudado.
Siga firme nos seus estudos e conte com o fórum sempre que precisar.
Abraços :)
Caso este post tenha lhe ajudado, por favor, marcar como solucionado
