svg簡單動畫

    <style>
		.ball3 {
			animation: second-animation 2s 2s infinite alternate ease-in-out forwards;
		}
		@keyframes second-animation {
			0% {
				fill:blue;
				transform:translateX(0);
			}
			50% {
				fill:purple;
				transform:translateX(50x);
			}
			100% {
				fill:red;
				transform:translateX(100px);
			}
		}
    </style>

	<svg width="200px" height="70px" viewBox="0 0 200 70">
		<circle class="ball3" fill="black" cx="45" cy="45" r="25"></circle>
	</svg>

<circle>會在viewBox內運動。採用fill屬性外聯樣式。