.r1 { animation-name: move1; animation-delay: 2.5s; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: ease-in; animation-direction: normal; animation-fill-mode: forwards; } .c1 { animation-name: blink; animation-delay: 0.5s; animation-duration: 1s; animation-iteration-count: 2; animation-timing-function: ease-in; animation-direction: normal; animation-fill-mode: forwards; } /*.text1 { animation-name: scl; animation-delay: 5.5s; animation-duration: 1s; animation-iteration-count: 2; animation-timing-function: ease-in; animation-direction: normal; animation-fill-mode: forwards; }*/ .r2 { transform-origin: center; transform-box: fill-box; animation-name: gr; animation-delay: 3.5s; animation-duration: 2s; animation-iteration-count: 1; animation-timing-function: ease-in; animation-direction: normal; animation-fill-mode: forwards; } .r3 { animation-name: move2; animation-delay: 7.5s; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: ease-in; animation-direction: normal; animation-fill-mode: forwards; } @keyframes move1 { to { transform: translateX(200px); } } @keyframes blink { from { opacity: 0; } to { opacity: 1; } } @keyframes gr { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } @keyframes scl { to { transform: scale(1.1); } } @keyframes move2 { to { transform: translateY(400px); } } }

 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720"> <rect id="r1" class="r1" x="10" y="20" width="100" height="100" fill="red" /> <rect id="r2" class="r2" x="10" y="130" width="100" height="100" fill="green" /> <rect id="r3" class="r3" x="10" y="240" width="100" height="100" fill="blue" /> <circle id="c1" class="c1" cx="50" cy="400" r="40" fill="orange" /> <text class="text1" id="text1" x="80" y="500" font-size="30" fill="red">I love SVG!</text> </svg>