RIPmotion v2.0 - CSS Only Animation

Eirudo June 28, 2021 627 0
-~-~
~-- ~
~~-~
Here's lies
hopes & dreams

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Here's Lies My Hopes and Dreams

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.


 
Summary
Article Name
RIPmotion v2.0 - CSS Only Animation
Description
Perbaruan dari RIPmotion sebelumnya (2013). Animasi yang dibuat hanya menggunakan HTML dan CSS saja. Dengan penambahan warna dan motion.
Author
Publisher Name
Eirudo
Publisher Logo

Ini adalah perbaruan dari RIPmotion versi sebelumnya,
dengan perbaruan kode HTML dan CSS, serta responsive.

Dengan penambahan warna, serta penambahan animasi.
Agar lebih hidup dan tidak terlalu monoton dari versi sebelumnya.

Untuk versi sebelumnya, cek di sini: RIPmotion (2013)

Kode yang di-share di bawah, boleh di-copy,
tapi mohon tidak digunakan untuk project lain, apalagi untuk tujuan komersial ya :3

<!-- ***************************************************
RIPmotion v2.0 (2021) - CSS only Animation
by Eirudo (eirudo.com)
*************************************************** -->

<div class="erd-ripmotion">
  <div class="erd-ripmotion-animation-wrapper">
    <!-- Animation area wrapper -->
    <section class="erd-ripmotion-animation">

      <!-- Sun and Clouds -->
      <div class="erdrip-sun"></div>
      <div class="erdrip-clouds erdrip-cloud-1"></div>
      <div class="erdrip-clouds erdrip-cloud-2"></div>
      <div class="erdrip-clouds erdrip-cloud-3"></div>

      <!-- Wooden sign -->
      <div class="erdrip-wooden">
        <span></span>
      </div>

      <!-- The People -->
      <div class="erdrip-people">
        <span class="erdrip-legs"></span>
        <span class="erdrip-body"></span>
        <span class="erdrip-head"></span>
        <span class="erdrip-tears"></span>
      </div>

      <!-- The Grave -->
      <div class="erdrip-grave">
        <span>-~-~<br/>~-- ~<br/>~~-~</span>
        <div>Here's lies<br/>hopes and dreams</div>
      </div>

      <!-- The Tree -->
      <div class="erdrip-tree">
        <span class="erdrip-leaves"></span>
      </div>

    </section>
  </div>
  <div class="erd-ripmotion-text-wrapper">
    <!-- Text / Paragraph area wrapper -->
    <section class="erd-ripmotion-text">
      <div class="erd-ripmotion-text-area">
        <p>Some paragraph...</p>

        <blockquote>Some quotes</blockquote>

        <p>Some paragraph...</p>

        <p>Some paragraph...</p>
      </div>
    </section>
  </div>
</div>
/* ***************************************
RIPmotion v2.0 (2021) - CSS only Animation
by Eirudo (eirudo.com)
*************************************** */


/* CSS Variables, so easier to change component's color */
.erd-ripmotion {
  --ripmotion-scheme: #273b78;
  --ripmotion-alt: #fff;
  --ripmotion-ground: #4574c4;
  --ripmotion-object: #e7e6cd;
  --ripmotion-object-alt: #131019;
  --ripmotion-grave: #9b916e;
  --ripmotion-body: #c77b2f;
  --ripmotion-legs: #fff;
  --ripmotion-leaves: #4674c2;
  --ripmotion-clouds: #647295;
  --ripmotion-sun: #f2b356;
  --ripmotion-lighter: rgba(255, 255, 255, .2);
  --ripmotion-darker: rgba(0, 0, 0, .2);
  --ripmotion-title: "RIPmotion";
  --ripmotion-tear: "\0665"; /* Tears shape, using a unicode characters */
  --ripmotion-fonts: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif;
}

/* Bit fix / mini-normalize */
.erd-ripmotion,
.erd-ripmotion * {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
  cursor: default;
  box-sizing: border-box;
  font-size: 100%;
  color: var(--ripmotion-scheme);
  -webkit-user-select: none;
  user-select: none;
}

/* Wrapper area */
.erd-ripmotion {
  display: block;
  position: relative;
  clear: both;
  width: 100%;
  margin: 0 auto;
  background-color: var(--ripmotion-scheme);
  font-family: var(--ripmotion-fonts);
}
.erd-ripmotion-animation {
  display: block;
  position: relative;
  clear: both;
  width: 100%;
  height: 0;
  padding-bottom: 40%;
}
.erd-ripmotion-animation-wrapper {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.erd-ripmotion-animation-wrapper:before {
  content: "";
  width: 100%;
  padding-bottom: 4%;
  background-color: var(--ripmotion-ground);
  left: 0;
  border-top: 0.5vw dashed var(--ripmotion-scheme);
}
.erd-ripmotion-text-wrapper {
  background-color: var(--ripmotion-ground);
}

/* All with same CSS */
.erd-ripmotion-animation-wrapper:before,
.erdrip-wooden,
.erdrip-grave,
.erdrip-grave:before,
.erdrip-grave:after,
.erdrip-people,
.erdrip-legs,
.erdrip-tears,
.erdrip-tree,
.erdrip-tree:before {
  display: block;
  position: absolute;
  bottom: 0;
  height: 0;
}
.erdrip-wooden span,
.erd-ripmotion span:after,
.erdrip-grave span,
.erdrip-grave div,
.erdrip-grave div:before,
.erdrip-legs:before,
.erdrip-legs:after,
.erdrip-body,
.erdrip-head,
.erdrip-head:before,
.erdrip-tears:before,
.erdrip-tears:after,
.erdrip-tree:after,
.erdrip-leaves,
.erdrip-leaves:before,
.erdrip-leaves:after,
.erdrip-sun,
.erdrip-sun:before,
.erdrip-sun:after,
.erdrip-clouds,
.erdrip-clouds:before,
.erdrip-clouds:after {
  display: block;
  position: absolute;
}

/* Wooden Sign */
.erdrip-wooden {
  left: 15%;
  width: 2.5%;
  padding-bottom: 26%;
  background-color: var(--ripmotion-object-alt);
  border-left: 0.5vw solid var(--ripmotion-lighter);
}
.erdrip-wooden span {
  top: 5%;
  left: 50%;
  transform: translateX(-50%) rotate(8deg);
  margin-left: -0.5vw;
  background-color: var(--ripmotion-object);
  width: fit-content;
  font-size: 3vw;
  padding: .3vw 1vw;
  min-height: 5vw;
  border-bottom: 0.35vw solid var(--ripmotion-darker);
  border-left: 0.35vw solid var(--ripmotion-darker);
  transition: 0.2s ease-out;
}
.erdrip-wooden:hover span {
  transform: translateX(-50%) rotate(0deg);
  color: var(--ripmotion-sun);
}
.erdrip-wooden:active span {
  transform: translateX(-50%) rotate(-8deg);
}
.erdrip-wooden span:before {
  content: var(--ripmotion-title);
  line-height: 5vw;
  margin-left: 1.25vw;
}
.erdrip-wooden span:after {
  content: "";
  border-right: none;
  border-top: 2.8vw solid transparent;
  border-bottom: 2.8vw solid transparent;
  border-left: 2.8vw solid var(--ripmotion-object);
  top: 0;
  right: .16vw;
  transform: translateX(100%);
}

/* Grave */
.erdrip-grave {
  left: 32%;
  padding-bottom: 10%;
  width: 17%;
}
.erdrip-grave:before {
  content: "";
  left: 0;
  width: 40%;
  padding-bottom: 55%;
  background-color: var(--ripmotion-object);
  border-top-left-radius: 40%;
  border-top-right-radius: 40%;
  border-top: 0.6vw solid var(--ripmotion-darker);
  border-left: 0.6vw solid var(--ripmotion-darker);
  border-right: none;
  border-bottom: none;
}
.erdrip-grave span {
  font-size: 1.7vw;
  line-height: 0.5;
  letter-spacing: 0.1vw;
  text-align: center;
  left: 9%;
  bottom: 0;
  padding-bottom: 28%;
  width: fit-content;
  color: var(--ripmotion-scheme);
}
.erdrip-grave:after {
  content: "";
  width: 99%;
  padding-bottom: 17%;
  background-color: var(--ripmotion-object-alt);
  right: 0;
  border-top-left-radius: 30% 100%;
  border-top-right-radius: 20% 100%;
  box-shadow: inset -0.1vw 0.4vw 0 rgb(255 255 255 / 20%);
}

/* Grave's Baloon Speech */
.erdrip-grave div {
  font-size: 1.2vw;
  font-weight: 600;
  letter-spacing: 0.4px;
  width: fit-content;
  bottom: 100%;
  left: -10%;
  background-color: var(--ripmotion-alt);
  border-radius: 10%/15%;
  text-align: center;
  line-height: 1.3;
  padding: 5% 10%;
  text-transform: uppercase;
  transform: scale(0.1) rotate(0deg);
  opacity: 0;
  transition: all 0.2s linear;
}
.erdrip-grave div:before {
  content: "";
  top: 100%;
  border-bottom: none;
  border-left: none;
  border-right: 1.5vw solid transparent;
  border-top: 1.5vw solid var(--ripmotion-alt);
  top: 99%;
  right: 20%;
}
.erdrip-grave:hover div,
.erdrip-people:hover + .erdrip-grave div {
  transform: scale(1) rotate(-5deg);
  opacity: 1;
  bottom: 120%;
  animation: erdrip-ani-speech 1.5s ease-in-out infinite alternate;
  animation-delay: 0.2s;
}

/* People (as the wrapper of body parts, and positioning) */
.erdrip-people {
  width: 10%;
  padding-bottom: 5%;
  left: 49%;
}

/* The Legs */
.erdrip-legs {
  right: 0;
  width: 80%;
  padding-bottom: 20%;
  background-color: var(--ripmotion-alt);
  border-top-left-radius: 30% 10%;
  border-top-right-radius: 30% 50%;
  box-shadow: inset 4.3vw 0 0 var(--ripmotion-object);
}
.erdrip-legs:before {
  content: "";
  width: 80%;
  height: 100%;
  background-color: var(--ripmotion-object);
  border-top-left-radius: 30% 30%;
  border-bottom-right-radius: 20% 110%;
  transform: rotate(-20deg);
  left: 0;
  bottom: 75%;
  box-shadow: 1vw 0.05vw 0.2vw var(--ripmotion-ground);
}

/* The Body */
.erdrip-body {
  left: 32%;
  width: 45%;
  height: 0;
  padding-bottom: 85%;
  bottom: 60%;
  background-color: var(--ripmotion-body);
  border-top-left-radius: 20% 20%;
  border-top-right-radius: 80% 50%;
  border-bottom-left-radius: 30% 20%;
  box-shadow: 0 0.05vw 0.2vw var(--ripmotion-ground), inset -.4vw .3vw 0 var(--ripmotion-lighter);
  animation: erdrip-ani-body 1s linear infinite;
}

/* The Head */
.erdrip-head {
  width: 53%;
  padding-bottom: 53%;
  height: 0;
  border-radius: 50%;
  background-color: var(--ripmotion-alt);
  left: 0;
  bottom: 170%;
  box-shadow: 0 0 0.3vw var(--ripmotion-scheme),
    inset -1vw 0.5vw 0 rgba(0, 0, 0, 0.5);
  transform: rotate(-45deg);
}
.erdrip-head:before {
  content: "";
  width: 107%;
  height: 0;
  padding-bottom: 40%;
  background-color: var(--ripmotion-object-alt);
  right: 0;
  bottom: 70%;
  border-bottom-left-radius: 100%;
  border-top-right-radius: 50% 100%;
  animation: erdrip-ani-hair 0.7s linear infinite alternate;
  transform-origin: center right;
}
.erdrip-head:after {
  content: ",(";
  display: block;
  position: absolute;
  transform: rotate(110deg);
  top: 30%;
  left: 18%;
  font-size: 2vw;
  letter-spacing: 0.1vw;
}

/* The Tears */
.erdrip-tears {
  width: 20%;
  padding-bottom: 100%;
  left: 10%;
  color: var(--ripmotion-alt);
  font-size: 1.3vw;
  overflow: hidden;
}
.erdrip-tears:before,
.erdrip-tears:after {
  content: var(--ripmotion-tear);
  animation: erdrip-ani-tears linear infinite;
}
.erdrip-tears:before {
  left: 0;
  top: 25%;
  animation-duration: 3s;
}
.erdrip-tears:after {
  right: 0;
  top: 40%;
  animation-duration: 2s;
}

/* The Tree */
.erdrip-tree {
  width: 20%;
  padding-bottom: 30%;
  right: 10%;
}
.erdrip-tree:before {
  content: "";
  border-top: none;
  border-left: 2vw solid transparent;
  border-right: 2vw solid transparent;
  border-bottom: 20vw solid var(--ripmotion-object-alt);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.erdrip-tree:after {
  content: "";
  width: 55%;
  padding-bottom: 55%;
  border-radius: 100%;
  border: none;
  border-bottom: 0.9vw solid var(--ripmotion-object-alt);
  border-top: 0.9vw solid transparent;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%);
  transform-origin: bottom center;
  animation: erdrip-ani-branch 1.5s linear infinite alternate;
}
.erdrip-leaves {
  width: 100%;
  padding-bottom: 100%;
  left: 0;
  top: 0;
}
.erdrip-leaves:before {
  content: "";
  width: 100%;
  height: 50%;
  background-color: var(--ripmotion-leaves);
  top: 60%;
  left: 0;
  transform: translateY(-50%);
  box-shadow: inset -0.5vw -0.5vw 0 var(--ripmotion-darker), inset 0.5vw .5vw 0 var(--ripmotion-lighter);
  border-radius: 25%/50%;
  animation: erdrip-ani-leaves-alt 1.5s linear infinite alternate;
}
.erdrip-leaves:after {
  content: "";
  width: 60%;
  height: 100%;
  background-color: var(--ripmotion-leaves);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%/25%;
  box-shadow: inset 0vw -0.5vw 0 var(--ripmotion-darker), inset 0vw .5vw 0 var(--ripmotion-lighter);
  animation: erdrip-ani-leaves 1.5s linear infinite alternate;
  transform-origin: bottom center;
}

/* The Sun */
.erdrip-sun {
  width: 5.5%;
  padding-bottom: 5.5%;
  border-radius: 100%;
  background-color: var(--ripmotion-sun);
  top: 8%;
  left: 55%;
  box-shadow: 0 0 10vw var(--ripmotion-sun);
}
.erdrip-sun:before,
.erdrip-sun:after {
  content: "";
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  border-radius: 100%;
}
.erdrip-sun:before {
  border: 0.2vw dashed var(--ripmotion-sun);
  transform: translate(-50%, -50%) scale(1.05);
  animation: erdrip-ani-sun-spin 10s linear infinite;
}
.erdrip-sun:after {
  box-shadow: 0 0 5vw var(--ripmotion-sun), inset 0 0 1vw var(--ripmotion-sun);
  transform: translate(-50%, -50%) scale(1.2);
  animation: erdrip-ani-sun-zoom 1s linear infinite alternate;
}

/* The Clouds */
.erdrip-clouds {
  top: 10%;
  left: -15%;
  width: 12%;
  padding-bottom: 6%;
  height: 0;
  background-color: var(--ripmotion-clouds);
  border-radius: 25%/50%;
  box-shadow: 0 0 1vw var(--ripmotion-scheme);
  animation: erdrip-ani-clouds 30s linear infinite;
}
.erdrip-clouds:before,
.erdrip-clouds:after {
  content: "";
  width: 50%;
  padding-bottom: 50%;
  height: 0;
  background-color: var(--ripmotion-clouds);
  border-radius: 50%;
}
.erdrip-clouds:before {
  top: -5%;
  right: 18%;
  transform: translateY(-30%);
  box-shadow: 0 -0.5vw 0.5vw var(--ripmotion-scheme);
  border: none;
  border-top: 0.4vw solid var(--ripmotion-lighter);
  border-right: 0.4vw solid var(--ripmotion-lighter);
}
.erdrip-clouds:after {
  bottom: 0;
  left: 15%;
  transform: translateY(30%) scale(0.9);
  border: none;
  border-bottom: 0.4vw solid var(--ripmotion-darker);
  border-left: 0.4vw solid var(--ripmotion-darker);
}
.erdrip-clouds,
.erdrip-clouds:before,
.erdrip-clouds:after {
  transition: all 0.2s ease-out;
}
.erdrip-clouds:hover,
.erdrip-clouds:hover:before,
.erdrip-clouds:hover:after {
  background-color: var(--ripmotion-object);
}

.erdrip-cloud-1 {
  top: 3%;
  animation-delay: -20s;
  animation-duration: 30s;
  transform: scale(.8);
}
.erdrip-cloud-2 {
  top: 19%;
  animation-delay: -5s;
  animation-duration: 20s;
  transform: scale(1.05);
}
.erdrip-cloud-3 {
  top: 15%;
  animation-delay: -5s;
  animation-duration: 50s;
  transform: scale(0.6);
}

/* Unecessary Paragraph and Quotes :P */
.erd-ripmotion-text {
  display: block;
  position: relative;
  clear: both;
  width: 100%;
  padding: 20px;
  border-top: 5px solid var(--ripmotion-alt);
  border-bottom: 5px solid var(--ripmotion-alt);
  margin-bottom: 30px;
}

.erd-ripmotion-text-area {
  max-width: 900px;
  margin: 0 auto;
  display: block;
  position: relative;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-weight: 300;
  color: var(--ripmotion-alt);
  text-align: justify;
}

.erd-ripmotion-text-area > * {
  display: block;
  margin: 20px auto;
  color: var(--ripmotion-alt);
}
.erd-ripmotion-text-area blockquote {
  width: fit-content;
  font-size: 18px;
  letter-spacing: 0.5px;
  font-style: italic;
  font-family: "Georgia";
  text-align: center;
}
.erd-ripmotion-text-area blockquote:before,
.erd-ripmotion-text-area blockquote:after {
  content: '"';
  margin: 0 3px;
}

/* Animation keyframes */
@keyframes erdrip-ani-speech{
  0%{bottom:120%;}
  100%{bottom:135%;}
}
@keyframes erdrip-ani-body{
  0%{transform:translateY(0%) skew(5deg);}
  15%{transform:translateY(-8%) skew(5deg);}
  30%{transform:translateY(0%) skew(5deg);}
  45%{transform:translateY(-8%) skew(5deg);}
  60%{transform:translateY(0%) skew(5deg);}
  100%{transform:translateY(0%) skew(5deg);}
}
@keyframes erdrip-ani-tears{
  0%{top:0;}
  100%{top:100%;}
}
@keyframes erdrip-ani-hair{
  0%{transform:rotate(-7deg);}
  100%{transform:rotate(0deg);}
}
@keyframes erdrip-ani-sign{
  0%{transform:translateX(-50%) rotate(0deg);}
  25%{transform:translateX(-50%) rotate(3deg);}
  50%{transform:translateX(-50%) rotate(0deg);}
  75%{transform:translateX(-50%) rotate(7deg);}
  100%{transform:translateX(-50%) rotate(7deg);}
}
@keyframes erdrip-ani-leaves{
  0%{transform:translateX(-50%) skew(0deg);border-top-left-radius:50% 25%;border-top-right-radius:50% 25%;}
  100%{transform:translateX(-50%) skew(5deg);border-top-left-radius:50% 15%;border-top-right-radius:50% 35%;}
}
@keyframes erdrip-ani-leaves-alt{
  0%{transform:translateY(-50%) rotate(0deg);left:0;border-top-left-radius:25% 50%;}
  100%{transform:translateY(-50%) rotate(-5deg);left:-7%;border-bottom-left-radius:25% 40%;}
}
@keyframes erdrip-ani-branch{
  0%{transform:translate(-50%,-50%) rotate(0deg);}
  100%{transform:translate(-50%,-50%) rotate(-10deg);}
}
@keyframes erdrip-ani-clouds{
  0%{left:100%;}
  100%{left:-15%;}
}
@keyframes erdrip-ani-sun-spin{
  0%{transform:translate(-50%,-50%) scale(1.05) rotate(0deg);}
  100%{transform:translate(-50%,-50%) scale(1.05) rotate(360deg);}
}
@keyframes erdrip-ani-sun-zoom{
  0%{transform:translate(-50%,-50%) scale(1.2);}
  100%{transform:translate(-50%,-50%) scale(1.4);}
}
ProjectRIPmotion v2.0 - CSS Only Animation
ByEirudo
DateJune 28, 2021
Made withCSS, HTML