[CSS Archive] Willem Dafoe's freak transformation

This post has been de-listed (Author was flagged for spam)

It is no longer included in search results and normal feeds (front page, hot posts, subreddit posts, etc). It remains visible only via the author's post history.
Author Summary
Grickit is in CSS Archive
Post Body
@keyframes mutate { /* Start */ 0% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }
      /* Flash Holmes */
      10% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }
      11% { background-image: url(%%holmes-open%%); background-size: 160px 160px; width: 160px; height: 160px; }
      12% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }

      /* Flash Holmes */
      40% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }
      41% { background-image: url(%%holmes-open%%); background-size: 160px 160px; width: 160px; height: 160px; }
      42% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }

      /* Flash Holmes */
      50% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }
      51% { background-image: url(%%holmes-open%%); background-size: 160px 160px; width: 160px; height: 160px; }
      52% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }

      /* Flash Holmes */
      60% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }
      61% { background-image: url(%%holmes-open%%); background-size: 160px 160px; width: 160px; height: 160px; }
      62% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }

      /* Flash Holmes */
      65% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }
      66% { background-image: url(%%holmes-open%%); background-size: 160px 160px; width: 160px; height: 160px; }
      67% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }

      /* Flash Holmes */
      68% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }
      69% { background-image: url(%%holmes-open%%); background-size: 160px 160px; width: 160px; height: 160px; }
      70% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }

      /* Flash Holmes */
      72% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }
      73% { background-image: url(%%holmes-open%%); background-size: 160px 160px; width: 160px; height: 160px; }
      74% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }

      /* Finish change to Holmes*/
      75% { background-image: url(%%holmes-open%%); background-size: 160px 160px; width: 160px; height: 160px; }

      /* Pump up */
      76% { background-image: url(%%holmes-open%%); background-size: 250px 250px; width: 250px; height: 250px; }
      /* Pump back */
      77% { background-image: url(%%willem%%); background-size: 220px 220px; width: 220px; height: 220px; }
      /* Wait */
      79% { background-image: url(%%holmes-open%%); background-size: 220px 220px; width: 220px; height: 220px; }

      /* Pump up */
      80% { background-image: url(%%holmes-open%%); background-size: 310px 310px; width: 310px; height: 310px; }
      /* Pump back */
      81% { background-image: url(%%willem%%); background-size: 280px 280px; width: 280px; height: 280px; }
      /* Wait */
      83% { background-image: url(%%holmes-open%%); background-size: 280px 280px; width: 280px; height: 280px; }

      /* Keep pumping */
      84% { background-image: url(%%holmes-open%%); background-size: 370px 370px; width: 370px; height: 370px; }
      85% { background-image: url(%%holmes-open%%); background-size: 340px 340px; width: 340px; height: 340px; }
      87% { background-image: url(%%holmes-open%%); background-size: 340px 340px; width: 340px; height: 340px; }

      88% { background-image: url(%%holmes-open%%); background-size: 430px 430px; width: 430px; height: 430px; }
      89% { background-image: url(%%holmes-open%%); background-size: 400px 400px; width: 400px; height: 400px; }
      91% { background-image: url(%%holmes-open%%); background-size: 400px 400px; width: 400px; height: 400px; }

      92% { background-image: url(%%holmes-open%%); background-size: 490px 490px; width: 490px; height: 490px; }
      93% { background-image: url(%%holmes-open%%); background-size: 460px 460px; width: 460px; height: 460px; }
      95% { background-image: url(%%holmes-open%%); background-size: 460px 460px; width: 460px; height: 460px; }

      96% { background-image: url(%%holmes-open%%); background-size: 600px 600px; width: 600px; height: 600px; }
      97% { background-image: url(%%holmes-open%%); background-size: 540px 540px; width: 540px; height: 540px; }
      100% { background-image: url(%%holmes-open%%); background-size: 540px 540px; width: 540px; height: 540px; }
    }


    @-webkit-keyframes mutate {
      /* Start */
      0% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }

      /* Flash Holmes */
      10% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }
      11% { background-image: url(%%holmes-open%%); background-size: 160px 160px; width: 160px; height: 160px; }
      12% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }

      /* Flash Holmes */
      40% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }
      41% { background-image: url(%%holmes-open%%); background-size: 160px 160px; width: 160px; height: 160px; }
      42% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }

      /* Flash Holmes */
      50% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }
      51% { background-image: url(%%holmes-open%%); background-size: 160px 160px; width: 160px; height: 160px; }
      52% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }

      /* Flash Holmes */
      60% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }
      61% { background-image: url(%%holmes-open%%); background-size: 160px 160px; width: 160px; height: 160px; }
      62% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }

      /* Flash Holmes */
      65% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }
      66% { background-image: url(%%holmes-open%%); background-size: 160px 160px; width: 160px; height: 160px; }
      67% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }

      /* Flash Holmes */
      68% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }
      69% { background-image: url(%%holmes-open%%); background-size: 160px 160px; width: 160px; height: 160px; }
      70% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }

      /* Flash Holmes */
      72% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }
      73% { background-image: url(%%holmes-open%%); background-size: 160px 160px; width: 160px; height: 160px; }
      74% { background-image: url(%%willem%%); background-size: 160px 160px; width: 160px; height: 160px; }

      /* Finish change to Holmes*/
      75% { background-image: url(%%holmes-open%%); background-size: 160px 160px; width: 160px; height: 160px; }

      /* Pump up */
      76% { background-image: url(%%holmes-open%%); background-size: 250px 250px; width: 250px; height: 250px; }
      /* Pump back */
      77% { background-image: url(%%willem%%); background-size: 220px 220px; width: 220px; height: 220px; }
      /* Wait */
      79% { background-image: url(%%holmes-open%%); background-size: 220px 220px; width: 220px; height: 220px; }

      /* Pump up */
      80% { background-image: url(%%holmes-open%%); background-size: 310px 310px; width: 310px; height: 310px; }
      /* Pump back */
      81% { background-image: url(%%willem%%); background-size: 280px 280px; width: 280px; height: 280px; }
      /* Wait */
      83% { background-image: url(%%holmes-open%%); background-size: 280px 280px; width: 280px; height: 280px; }

      /* Keep pumping */
      84% { background-image: url(%%holmes-open%%); background-size: 370px 370px; width: 370px; height: 370px; }
      85% { background-image: url(%%holmes-open%%); background-size: 340px 340px; width: 340px; height: 340px; }
      87% { background-image: url(%%holmes-open%%); background-size: 340px 340px; width: 340px; height: 340px; }

      88% { background-image: url(%%holmes-open%%); background-size: 430px 430px; width: 430px; height: 430px; }
      89% { background-image: url(%%holmes-open%%); background-size: 400px 400px; width: 400px; height: 400px; }
      91% { background-image: url(%%holmes-open%%); background-size: 400px 400px; width: 400px; height: 400px; }

      92% { background-image: url(%%holmes-open%%); background-size: 490px 490px; width: 490px; height: 490px; }
      93% { background-image: url(%%holmes-open%%); background-size: 460px 460px; width: 460px; height: 460px; }
      95% { background-image: url(%%holmes-open%%); background-size: 460px 460px; width: 460px; height: 460px; }

      96% { background-image: url(%%holmes-open%%); background-size: 600px 600px; width: 600px; height: 600px; }
      97% { background-image: url(%%holmes-open%%); background-size: 540px 540px; width: 540px; height: 540px; }
      100% { background-image: url(%%holmes-open%%); background-size: 540px 540px; width: 540px; height: 540px; }
    }
Author
Account Strength
Account Age
12 years
Verified Email
Yes
Verified Flair
Total Karma
54,066
Link Karma
15,093
Comment Karma
38,918
Profile updated: 6 months ago
Posts updated: 7 months ago
Grickit
Subreddit

r/Grickit
Post Details

Location
CSS Archive
We try to extract some basic information from the post title. This is not always successful or accurate, please use your best judgement and compare these values to the post title and body for confirmation.
Posted: 8 years ago
Reddit URL: View post on reddit.com
External URL: reddit.com/r/Grickit/com...