Last active
August 29, 2018 14:05
-
-
Save chhib/6ec075efc0ac8eb5cc4f7f34a056a9c8 to your computer and use it in GitHub Desktop.
Utterly Failing at CSS Animations
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style> | |
| html, body { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| body { | |
| background: #D8D8D8; | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| } | |
| @keyframes slidein { | |
| from { | |
| width: 300%; | |
| height: 300%; | |
| top: -100%; | |
| left: -100%; | |
| } | |
| to { | |
| left: 37.5%; | |
| top: 37.5%; | |
| width: 25%; | |
| height: 25%; | |
| } | |
| } | |
| .logo { | |
| position: absolute; | |
| left: 37.5%; | |
| top: 37.5%; | |
| width: 25%; | |
| height: 25%; | |
| animation: 4s ease-in 4s slidein; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg class="logo" viewBox="0 0 564 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| <!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch --> | |
| <title>DT</title> | |
| <desc>Created with Sketch.</desc> | |
| <defs> | |
| <circle id="path-1" cx="267.85" cy="267.85" r="267.85"></circle> | |
| </defs> | |
| <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |
| <g id="Artboard" transform="translate(-917.000000, -143.000000)"> | |
| <g id="DT" transform="translate(931.000000, 157.000000)"> | |
| <mask id="mask-2" fill="white"> | |
| <use xlink:href="#path-1"></use> | |
| </mask> | |
| <use id="Oval-2" stroke="#979797" stroke-width="1.1" fill="#D8D8D8" xlink:href="#path-1"></use> | |
| <rect id="Rectangle" fill="#FFF200" mask="url(#mask-2)" x="0" y="0" width="535.7" height="535.7"></rect> | |
| <path d="M99.9072251,116.065 C102.609939,115.678898 105.666533,115.357151 109.0771,115.09975 C112.487667,114.842349 115.994707,114.649301 119.598325,114.5206 C123.201943,114.391899 126.708983,114.295375 130.11955,114.231025 C133.530117,114.166675 136.586712,114.1345 139.289425,114.1345 C151.258585,114.1345 161.490133,115.807583 169.984375,119.1538 C178.478618,122.500017 185.363999,127.19752 190.640725,133.24645 C195.917451,139.29538 199.778413,146.502508 202.223725,154.86805 C204.669037,163.233592 205.891675,172.43555 205.891675,182.4742 C205.891675,191.611946 204.733387,200.427808 202.416775,208.92205 C200.100163,217.416292 196.239202,224.945167 190.833775,231.5089 C185.428348,238.072633 178.317744,243.34928 169.50175,247.339 C160.685756,251.32872 149.77854,253.32355 136.779775,253.32355 C134.720565,253.32355 131.985717,253.259201 128.57515,253.1305 C125.164583,253.001799 121.625368,252.840926 117.9574,252.647875 C114.289432,252.454824 110.782392,252.261776 107.436175,252.068725 C104.089958,251.875674 101.580333,251.650451 99.9072251,251.39305 L99.9072251,116.065 Z M141.412975,137.6866 C138.581561,137.6866 135.718015,137.750949 132.82225,137.87965 C129.926486,138.008351 127.770782,138.201399 126.355075,138.4588 L126.355075,228.99925 C126.869878,229.127951 127.738594,229.224475 128.96125,229.288825 C130.183906,229.353175 131.503068,229.417525 132.918775,229.481875 C134.334482,229.546225 135.685819,229.610575 136.972825,229.674925 C138.259831,229.739275 139.225072,229.77145 139.868575,229.77145 C147.333212,229.77145 153.542925,228.452288 158.4979,225.813925 C163.452875,223.175562 167.378186,219.668522 170.27395,215.2927 C173.169715,210.916878 175.196719,205.865454 176.355025,200.138275 C177.513331,194.411096 178.092475,188.52313 178.092475,182.4742 C178.092475,177.197474 177.57768,171.888652 176.548075,166.547575 C175.51847,161.206498 173.620164,156.412471 170.8531,152.16535 C168.086036,147.918229 164.321599,144.443364 159.559675,141.74065 C154.797751,139.037936 148.748912,137.6866 141.412975,137.6866 Z M229.980575,116.065 L310.096325,116.065 L310.096325,139.6171 L256.428425,139.6171 L256.428425,171.08425 L305.270075,171.08425 L305.270075,194.63635 L256.428425,194.63635 L256.428425,227.6479 L311.061575,227.6479 L311.061575,251.2 L229.980575,251.2 L229.980575,116.065 Z M380.324175,195.40855 L383.799075,218.3815 L384.764325,218.3815 L388.625325,195.2155 L414.494025,116.065 L442.293225,116.065 L392.100225,252.16525 L373.181325,252.16525 L322.602225,116.065 L353.297175,116.065 L380.324175,195.40855 Z M187.222475,314.5171 L147.840275,314.5171 L147.840275,426.1 L121.392425,426.1 L121.392425,314.5171 L81.817175,314.5171 L81.817175,290.965 L187.222475,290.965 L187.222475,314.5171 Z M203.631725,290.965 L230.079575,290.965 L230.079575,426.1 L203.631725,426.1 L203.631725,290.965 Z M255.948275,292.31635 C261.353702,291.286745 267.306018,290.482378 273.8054,289.903225 C280.304782,289.324072 286.771893,289.0345 293.206925,289.0345 C299.899358,289.0345 306.623866,289.58147 313.38065,290.675425 C320.137434,291.76938 326.218448,293.957259 331.623875,297.239125 C337.029302,300.520991 341.437233,305.089796 344.8478,310.945675 C348.258367,316.801554 349.963625,324.426953 349.963625,333.8221 C349.963625,342.316342 348.48359,349.491296 345.523475,355.347175 C342.56336,361.203054 338.638049,365.997081 333.747425,369.7294 C328.856801,373.461719 323.290581,376.164392 317.0486,377.8375 C310.806619,379.510608 304.339508,380.34715 297.647075,380.34715 L294.558275,380.34715 C293.142568,380.34715 291.662533,380.314975 290.118125,380.250625 C288.573717,380.186275 287.061507,380.089751 285.58145,379.96105 C284.101393,379.832349 283.039628,379.703651 282.396125,379.57495 L282.396125,426.1 L255.948275,426.1 L255.948275,292.31635 Z M295.330475,311.8144 C292.756462,311.8144 290.311187,311.910924 287.994575,312.103975 C285.677963,312.297026 283.811832,312.522249 282.396125,312.77965 L282.396125,356.602 C282.910928,356.730701 283.68312,356.859399 284.712725,356.9881 C285.74233,357.116801 286.836269,357.213325 287.994575,357.277675 C289.152881,357.342025 290.278995,357.3742 291.37295,357.3742 L293.786075,357.3742 C297.260992,357.3742 300.703683,357.052453 304.11425,356.40895 C307.524817,355.765447 310.581411,354.574984 313.284125,352.837525 C315.986839,351.100066 318.142542,348.686965 319.7513,345.59815 C321.360058,342.509335 322.164425,338.455325 322.164425,333.436 C322.164425,329.188879 321.392233,325.681839 319.847825,322.914775 C318.303417,320.147711 316.276413,317.927658 313.76675,316.25455 C311.257087,314.581442 308.393541,313.423153 305.176025,312.77965 C301.958509,312.136147 298.676692,311.8144 295.330475,311.8144 Z M424.673975,389.8066 C424.673975,385.688179 423.161765,382.342013 420.1373,379.768 C417.112835,377.193987 413.316223,374.845236 408.74735,372.721675 C404.178477,370.598114 399.223577,368.410236 393.8825,366.157975 C388.541423,363.905714 383.586523,361.138691 379.01765,357.856825 C374.448777,354.574959 370.652165,350.488774 367.6277,345.59815 C364.603235,340.707526 363.091025,334.465638 363.091025,326.8723 C363.091025,320.308567 364.184964,314.613649 366.372875,309.787375 C368.560786,304.961101 371.68173,300.939266 375.7358,297.72175 C379.78987,294.504234 384.583897,292.123308 390.118025,290.5789 C395.652153,289.034492 401.829691,288.2623 408.650825,288.2623 C416.501564,288.2623 423.90174,288.937968 430.851575,290.289325 C437.80141,291.640682 443.528502,293.603337 448.033025,296.17735 L439.731875,318.3781 C436.900461,316.576291 432.653403,314.935382 426.990575,313.455325 C421.327747,311.975268 415.214558,311.23525 408.650825,311.23525 C402.473194,311.23525 397.743516,312.457888 394.46165,314.9032 C391.179784,317.348512 389.538875,320.630329 389.538875,324.74875 C389.538875,328.609769 391.051085,331.827237 394.07555,334.40125 C397.100015,336.975263 400.896627,339.356189 405.4655,341.5441 C410.034373,343.732011 414.989273,345.984238 420.33035,348.30085 C425.671427,350.617462 430.626327,353.416659 435.1952,356.698525 C439.764073,359.980391 443.560685,364.034401 446.58515,368.860675 C449.609615,373.686949 451.121825,379.703614 451.121825,386.91085 C451.121825,394.118086 449.931362,400.327799 447.5504,405.540175 C445.169438,410.752551 441.823272,415.096133 437.5118,418.57105 C433.200328,422.045967 427.988031,424.619942 421.87475,426.29305 C415.761469,427.966158 409.036962,428.8027 401.701025,428.8027 C392.048477,428.8027 383.554362,427.901809 376.218425,426.1 C368.882488,424.298191 363.477142,422.496409 360.002225,420.6946 L368.496425,398.10775 C369.912132,398.879954 371.746089,399.716495 373.99835,400.6174 C376.250611,401.518305 378.792411,402.354846 381.623825,403.12705 C384.455239,403.899254 387.447484,404.542747 390.60065,405.05755 C393.753816,405.572353 397.003458,405.82975 400.349675,405.82975 C408.200414,405.82975 414.217079,404.510588 418.39985,401.872225 C422.582621,399.233862 424.673975,395.212027 424.673975,389.8066 Z" id="DEV-TIPS" fill="#231F20" mask="url(#mask-2)"></path> | |
| <circle id="Oval-2-Copy" stroke="#231F20" stroke-width="14" cx="267.85" cy="267.85" r="274.85"></circle> | |
| </g> | |
| </g> | |
| </g> | |
| </svg> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment