Customize transition object animation css

<style> .circle1{ width: 100px; height: 100px; background-color: #937DC2 ; position: relative; border-radius: 50%; animation-timing-function: linear!important; } .circle2{ width: 100px; height: 100px; background-color: #C689C6 ; position: relative; border-radius: 50%; animation-timing-function: ease!important; } .circle3{ width: 100px; height: 100px; background-color: #FFABE1 ; position: relative; border-radius: 50%; animation-timing-function: ease-in!important; } .circle4{ width: 100px; height: 100px; background-color: #FFE6F7 ; position: relative; border-radius: 50%; animation-timing-function: ease-in-out!important; } .circle { animation: mymove 5s infinite; } @keyframes mymove { 0% {left: 0;} 50% {left: 100%;} 100% {left: 0;} } </style> <pre data-line=""> <code readonly="true"> <xmp> <style> .circle1{ width: 100px; height: 100px; background-color: #937DC2 ; position: relative; border-radius: 50%; animation-timing-function: linear!important; } .circle2{ width: 100px; height: 100px; background-color: #C689C6 ; position: relative; border-radius: 50%; animation-timing-function: ease!important; } .circle3{ width: 100px; height: 100px; background-color: #FFABE1 ; position: relative; border-radius: 50%; animation-timing-function: ease-in!important; } .circle4{ width: 100px; height: 100px; background-color: #FFE6F7 ; position: relative; border-radius: 50%; animation-timing-function: ease-in-out!important; } .circle { animation: mymove 5s infinite; } @keyframes mymove { 0% {left: 0;} 50% {left: 100%;} 100% {left: 0;} } </style></xmp> </code> </pre> <style> .a-circle1{ width: 100px; height: 100px; background-color: #937DC2 ; position: absolute; border-radius: 50%; animation-delay: 1s!important; } .a-circle2{ width: 100px; height: 100px; background-color: #C689C6 ; position: absolute; border-radius: 50%; animation-delay: 1.5s!important; } .a-circle3{ width: 100px; height: 100px; background-color: #FFABE1 ; position: absolute; border-radius: 50%; animation-delay: 1.2s!important; } .a-circle4{ width: 100px; height: 100px; background-color: #FFE6F7 ; position: absolute; border-radius: 50%; animation-delay: 0.52s!important; } .circle-another { animation: mymove-another 5s infinite; } @keyframes mymove-another { 0% {scale: 1;} 50% {scale: 1.5;opacity:0;} 100% {scale: 1;} } </style> <pre data-line=""> <code readonly="true"> <xmp> <style> .a-circle1{ width: 100px; height: 100px; background-color: #937DC2 ; position: absolute; border-radius: 50%; animation-delay: 1s!important; } .a-circle2{ width: 100px; height: 100px; background-color: #C689C6 ; position: absolute; border-radius: 50%; animation-delay: 1.5s!important; } .a-circle3{ width: 100px; height: 100px; background-color: #FFABE1 ; position: absolute; border-radius: 50%; animation-delay: 1.2s!important; } .a-circle4{ width: 100px; height: 100px; background-color: #FFE6F7 ; position: absolute; border-radius: 50%; animation-delay: 0.52s!important; } .circle-another { animation: mymove-another 5s infinite; } @keyframes mymove-another { 0% {scale: 1;} 50% {scale: 1.5;opacity:0;} 100% {scale: 1;} } </style></xmp> </code> </pre> <style> .circle031{ background-color: #937DC2 ; border-radius: 50%; animation-delay: 0.7s!important; } .circle032{ background-color: #C689C6 ; border-radius: 50%; animation-delay: 0.4s!important; } .circle033{ background-color: #FFABE1 ; border-radius: 50%; animation-delay: 0.8s!important; } .circle034{ background-color: #FFE6F7 ; border-radius: 50%; animation-delay: 0.9s!important; } .circle03 { animation: mymovenew 2s infinite; width: 10px; height: 10px; display: inline-block; } @keyframes mymovenew { 0% {transform: translateY(0px);} 50% {transform: translateY(-15px);} 100% {transform: translateY(0px);} } </style> <pre data-line=""> <code readonly="true"> <xmp> <style> .circle031{ background-color: #937DC2 ; border-radius: 50%; animation-delay: 0.7s!important; } .circle032{ background-color: #C689C6 ; border-radius: 50%; animation-delay: 0.4s!important; } .circle033{ background-color: #FFABE1 ; border-radius: 50%; animation-delay: 0.8s!important; } .circle034{ background-color: #FFE6F7 ; border-radius: 50%; animation-delay: 0.9s!important; } .circle03 { animation: mymovenew 2s infinite; width: 10px; height: 10px; display: inline-block; } @keyframes mymovenew { 0% {transform: translateY(0px);} 50% {transform: translateY(-15px);} 100% {transform: translateY(0px);} } </style></xmp> </code> </pre> <style> .bubble{ width: 300px; height: 300px; border-radius: 50%; box-shadow: 0 0 20px #fff, -20px 0 80px #f0f, 20px 0 80px #0ff, inset 0 0 50px #fff, inset 50px 0 80px #f0f, inset -50px 0 80px #0ff, inset 50px 0 300px #f0f, inset -50px 0 300px #0ff; animation: pulsate 6s linear infinite; } @keyframes pulsate { 50% { box-shadow: 0 0 20px #fff, 20px 0 80px #f0f, -20px 0 80px #0ff, inset 0 0 50px #fff, inset -50px 0 80px #f0f, inset 50px 0 80px #0ff, inset -50px 0 300px #f0f, inset 50px 0 300px #0ff; } } </style> <pre data-line=""> <code readonly="true"> <xmp> <style> .bubble{ width: 300px; height: 300px; border-radius: 50%; box-shadow: 0 0 20px #fff, -20px 0 80px #f0f, 20px 0 80px #0ff, inset 0 0 50px #fff, inset 50px 0 80px #f0f, inset -50px 0 80px #0ff, inset 50px 0 300px #f0f, inset -50px 0 300px #0ff; animation: pulsate 6s linear infinite; } @keyframes pulsate { 50% { box-shadow: 0 0 20px #fff, 20px 0 80px #f0f, -20px 0 80px #0ff, inset 0 0 50px #fff, inset -50px 0 80px #f0f, inset 50px 0 80px #0ff, inset -50px 0 300px #f0f, inset 50px 0 300px #0ff; } } </style></xmp> </code> </pre>