Twitter - Icon Animation 🐦

twitter.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" viewBox="0 0 512 512"><style>
@keyframes a0_t { 0% { transform: translate(256px,256px) rotate(0deg) translate(-256px,-256px); animation-timing-function: cubic-bezier(.6,.1,.7,.5); } 50% { transform: translate(256px,256px) rotate(5deg) translate(-256px,-256px); animation-timing-function: cubic-bezier(.2,.5,.5,.9); } 100% { transform: translate(256px,256px) rotate(0deg) translate(-256px,-256px); } }
@keyframes a0_d { 0% { d: path('M459.4,151.7C459.7,156.3,459.7,160.8,459.7,165.4C459.7,304.1,354.1,463.9,161.1,463.9C101.7,463.9,46.5,446.7,0,416.8C8.4,417.8,16.6,418.1,25.3,418.1C74.4,418.1,119.6,401.5,155.6,373.3C109.5,372.3,70.8,342.1,57.5,300.5C64,301.5,70.5,302.1,77.3,302.1C86.7,302.1,96.2,300.8,104.9,298.6C56.9,288.8,20.8,246.6,20.8,195.6L20.8,194.3C34.8,202.1,51,206.9,68.2,207.6C40,188.8,21.4,156.6,21.4,120.2C21.4,100.7,26.6,82.8,35.7,67.2C87.4,130.9,165,172.5,252.1,177.1C250.5,169.3,249.5,161.1,249.5,153C249.5,95.2,296.3,48.1,354.4,48.1C384.6,48.1,411.9,60.8,431.1,81.2C454.8,76.7,477.6,67.9,497.7,55.9C489.9,80.2,473.3,100.7,451.6,113.7C472.7,111.4,493.2,105.6,512,97.5C497.7,118.3,479.8,136.8,459.4,151.7Z'); } 12.5% { d: path('M459.4,151.7C459.7,156.3,459.7,160.8,459.7,165.4C459.7,304.1,354.1,463.9,161.1,463.9C101.7,463.9,46.5,446.7,0,416.8C8.4,417.8,16.6,418.1,25.3,418.1C74.4,418.1,117,399.5,155.6,373.3C155.6,373.3,133,334,133,334C133,334,133,334,133,334C133,334,149.2,316.4,149.2,316.4C149.2,316.4,122.2,248.6,122.2,248.6L122.2,248.6C122.2,248.6,158.5,231.7,158.5,231.7C158.5,231.7,139.6,182,139.6,182C139.6,182,149.7,144.2,149.7,144.2C149.7,144.2,211.5,174.9,252.1,177.1C250.5,169.3,249.5,161.1,249.5,153C249.5,95.2,296.3,48.1,354.4,48.1C384.6,48.1,411.9,60.8,431.1,81.2C454.8,76.7,477.6,67.9,497.7,55.9C489.9,80.2,473.3,100.7,451.6,113.7C472.7,111.4,493.2,105.6,512,97.5C497.7,118.3,479.8,136.8,459.4,151.7Z'); } 25% { d: path('M459.4,151.7C459.7,156.3,459.7,160.8,459.7,165.4C459.7,304.1,354.1,463.9,161.1,463.9C101.7,463.9,46.5,446.7,0,416.8C8.4,417.8,16.6,418.1,25.3,418.1C74.4,418.1,117,404,155.6,373.3C155.6,373.3,170.4,355.2,170.4,355.2C170.4,355.2,170.4,355.2,170.4,355.2C170.4,355.2,188,332,188,332C188,332,211,295,211,295L218,281C218,281,237.4,252.8,237.4,252.8C237.4,252.8,243,236,243,236C243,236,249.5,211.5,249.5,211.5C249.5,211.5,252.1,177.1,252.1,177.1C250.5,169.3,249.5,161.1,249.5,153C249.5,95.2,296.3,48.1,354.4,48.1C384.6,48.1,411.9,60.8,431.1,81.2C454.8,76.7,477.6,67.9,497.7,55.9C489.9,80.2,473.3,100.7,451.6,113.7C472.7,111.4,493.2,105.6,512,97.5C497.7,118.3,479.8,136.8,459.4,151.7Z'); } 37.5% { d: path('M459.4,151.7C459.7,156.3,459.7,160.8,459.7,165.4C459.7,304.1,354.1,463.9,161.1,463.9C101.7,463.9,46.5,446.7,0,416.8C8.4,417.8,16.6,418.1,25.3,418.1C74.4,418.1,117.5,401,155.6,373.3C155.6,373.3,133,334,133,334C133,334,133,334,133,334C133,334,149.2,316.4,149.2,316.4C149.2,316.4,122.2,248.6,122.2,248.6L122.2,248.6C122.2,248.6,158.5,231.7,158.5,231.7C158.5,231.7,139.6,182,139.6,182C139.6,182,149.7,144.2,149.7,144.2C149.7,144.2,211.5,174.9,252.1,177.1C250.5,169.3,249.5,161.1,249.5,153C249.5,95.2,296.3,48.1,354.4,48.1C384.6,48.1,411.9,60.8,431.1,81.2C454.8,76.7,477.6,67.9,497.7,55.9C489.9,80.2,473.3,100.7,451.6,113.7C472.7,111.4,493.2,105.6,512,97.5C497.7,118.3,479.8,136.8,459.4,151.7Z'); } 50% { d: path('M459.4,151.7C459.7,156.3,459.7,160.8,459.7,165.4C459.7,304.1,354.1,463.9,161.1,463.9C101.7,463.9,46.5,446.7,0,416.8C8.4,417.8,16.6,418.1,25.3,418.1C74.4,418.1,119.6,401.5,155.6,373.3C109.5,372.3,70.8,342.1,57.5,300.5C64,301.5,70.5,302.1,77.3,302.1C86.7,302.1,96.2,300.8,104.9,298.6C56.9,288.8,20.8,246.6,20.8,195.6L20.8,194.3C34.8,202.1,51,206.9,68.2,207.6C40,188.8,21.4,156.6,21.4,120.2C21.4,100.7,26.6,82.8,35.7,67.2C87.4,130.9,165,172.5,252.1,177.1C250.5,169.3,249.5,161.1,249.5,153C249.5,95.2,296.3,48.1,354.4,48.1C384.6,48.1,411.9,60.8,431.1,81.2C454.8,76.7,477.6,67.9,497.7,55.9C489.9,80.2,473.3,100.7,451.6,113.7C472.7,111.4,493.2,105.6,512,97.5C497.7,118.3,479.8,136.8,459.4,151.7Z'); } 62.5% { d: path('M459.4,151.7C459.7,156.3,459.7,160.8,459.7,165.4C459.7,304.1,354.1,463.9,161.1,463.9C101.7,463.9,46.5,446.7,0,416.8C8.4,417.8,16.6,418.1,25.3,418.1C74.4,418.1,117,399.5,155.6,373.3C155.6,373.3,133,334,133,334C133,334,133,334,133,334C133,334,149.2,316.4,149.2,316.4C149.2,316.4,122.2,248.6,122.2,248.6L122.2,248.6C122.2,248.6,158.5,231.7,158.5,231.7C158.5,231.7,139.6,182,139.6,182C139.6,182,149.7,144.2,149.7,144.2C149.7,144.2,211.5,174.9,252.1,177.1C250.5,169.3,249.5,161.1,249.5,153C249.5,95.2,296.3,48.1,354.4,48.1C384.6,48.1,411.9,60.8,431.1,81.2C454.8,76.7,477.6,67.9,497.7,55.9C489.9,80.2,473.3,100.7,451.6,113.7C472.7,111.4,493.2,105.6,512,97.5C497.7,118.3,479.8,136.8,459.4,151.7Z'); } 75% { d: path('M459.4,151.7C459.7,156.3,459.7,160.8,459.7,165.4C459.7,304.1,354.1,463.9,161.1,463.9C101.7,463.9,46.5,446.7,0,416.8C8.4,417.8,16.6,418.1,25.3,418.1C74.4,418.1,117,404,155.6,373.3C155.6,373.3,170.4,355.2,170.4,355.2C170.4,355.2,170.4,355.2,170.4,355.2C170.4,355.2,188,332,188,332C188,332,211,295,211,295L218,281C218,281,237.4,252.8,237.4,252.8C237.4,252.8,243,236,243,236C243,236,249.5,211.5,249.5,211.5C249.5,211.5,252.1,177.1,252.1,177.1C250.5,169.3,249.5,161.1,249.5,153C249.5,95.2,296.3,48.1,354.4,48.1C384.6,48.1,411.9,60.8,431.1,81.2C454.8,76.7,477.6,67.9,497.7,55.9C489.9,80.2,473.3,100.7,451.6,113.7C472.7,111.4,493.2,105.6,512,97.5C497.7,118.3,479.8,136.8,459.4,151.7Z'); } 87.5% { d: path('M459.4,151.7C459.7,156.3,459.7,160.8,459.7,165.4C459.7,304.1,354.1,463.9,161.1,463.9C101.7,463.9,46.5,446.7,0,416.8C8.4,417.8,16.6,418.1,25.3,418.1C74.4,418.1,117.5,401,155.6,373.3C155.6,373.3,133,334,133,334C133,334,133,334,133,334C133,334,149.2,316.4,149.2,316.4C149.2,316.4,122.2,248.6,122.2,248.6L122.2,248.6C122.2,248.6,158.5,231.7,158.5,231.7C158.5,231.7,139.6,182,139.6,182C139.6,182,149.7,144.2,149.7,144.2C149.7,144.2,211.5,174.9,252.1,177.1C250.5,169.3,249.5,161.1,249.5,153C249.5,95.2,296.3,48.1,354.4,48.1C384.6,48.1,411.9,60.8,431.1,81.2C454.8,76.7,477.6,67.9,497.7,55.9C489.9,80.2,473.3,100.7,451.6,113.7C472.7,111.4,493.2,105.6,512,97.5C497.7,118.3,479.8,136.8,459.4,151.7Z'); } 100% { d: path('M459.4,151.7C459.7,156.3,459.7,160.8,459.7,165.4C459.7,304.1,354.1,463.9,161.1,463.9C101.7,463.9,46.5,446.7,0,416.8C8.4,417.8,16.6,418.1,25.3,418.1C74.4,418.1,119.6,401.5,155.6,373.3C109.5,372.3,70.8,342.1,57.5,300.5C64,301.5,70.5,302.1,77.3,302.1C86.7,302.1,96.2,300.8,104.9,298.6C56.9,288.8,20.8,246.6,20.8,195.6L20.8,194.3C34.8,202.1,51,206.9,68.2,207.6C40,188.8,21.4,156.6,21.4,120.2C21.4,100.7,26.6,82.8,35.7,67.2C87.4,130.9,165,172.5,252.1,177.1C250.5,169.3,249.5,161.1,249.5,153C249.5,95.2,296.3,48.1,354.4,48.1C384.6,48.1,411.9,60.8,431.1,81.2C454.8,76.7,477.6,67.9,497.7,55.9C489.9,80.2,473.3,100.7,451.6,113.7C472.7,111.4,493.2,105.6,512,97.5C497.7,118.3,479.8,136.8,459.4,151.7Z'); } }
</style><path fill="currentColor" d="M459.4 151.7c.3 4.6 .3 9.1 .3 13.7c0 138.7-105.6 298.5-298.6 298.5c-59.4 0-114.6-17.2-161.1-47.1c8.4 1 16.6 1.3 25.3 1.3c49.1 0 94.3-16.6 130.3-44.8c-46.1-1-84.8-31.2-98.1-72.8c6.5 1 13 1.6 19.8 1.6c9.4 0 18.9-1.3 27.6-3.5c-48-9.8-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.6 47.4 13.3c-28.2-18.8-46.8-51-46.8-87.4c0-19.5 5.2-37.4 14.3-53c51.7 63.7 129.3 105.3 216.4 109.9c-1.6-7.8-2.6-16-2.6-24.1c0-57.8 46.8-104.9 104.9-104.9c30.2 0 57.5 12.7 76.7 33.1c23.7-4.5 46.5-13.3 66.6-25.3c-7.8 24.3-24.4 44.8-46.1 57.8c21.1-2.3 41.6-8.1 60.4-16.2c-14.3 20.8-32.2 39.3-52.6 54.2Z" transform="translate(256,256) translate(-256,-256)" style="animation: .8s linear infinite both a0_t, .8s linear infinite both a0_d;"/></svg>

Unfortunately, only chrome supports CSS shape morphing :(