Цыпленок летающий в облаках

Простая анимация летящего в небе с облаками цыпленка реализованная на чистом CSS

 HTML

<div class="scene">
    <div class="sky">
        <div class="sky__cloud-group">
            <div class="sky__cloud">
                <div class="sky__cloud--bubbles"></div>
            </div>
            <div class="sky__cloud">
                <div class="sky__cloud--bubbles"></div>
            </div>
            <div class="sky__cloud sky__cloud--small">
                <div class="sky__cloud--bubbles"></div>
            </div>
            <div class="sky__cloud sky__cloud--small">
                <div class="sky__cloud--bubbles"></div>
            </div>
            <div class="sky__cloud sky__cloud--small">
                <div class="sky__cloud--bubbles"></div>
            </div>
        </div>
        <div class="sky__cloud-group">
            <div class="sky__cloud">
                <div class="sky__cloud--bubbles"></div>
            </div>
            <div class="sky__cloud">
                <div class="sky__cloud--bubbles"></div>
            </div>
            <div class="sky__cloud sky__cloud--small">
                <div class="sky__cloud--bubbles"></div>
            </div>
            <div class="sky__cloud sky__cloud--small">
                <div class="sky__cloud--bubbles"></div>
            </div>
            <div class="sky__cloud sky__cloud--small">
                <div class="sky__cloud--bubbles"></div>
            </div>
        </div>
    </div>
    <div class="bird">
        <div class="bird__head">
            <div class="bird__head--hairs"></div>
            <div class="bird__head--eye"></div>
            <div class="bird__head--spot"></div>
            <div class="bird__head--beak"></div>
            <div class="bird__head--reflection">
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
                <div class="bird__head--reflection--dot"></div>
            </div>
        </div>
        <div class="bird__body"></div>
        <div class="bird__wing"></div>
        <div class="bird__legs">
            <div class="bird__leg bird__leg--left"></div>
            <div class="bird__leg bird__leg--right"></div>
        </div>
    </div>
</div>
<p>Inspired by <a href="https://dribbble.com/shots/2941303-Chick" target="_blank">RemovT</a></p>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #49befe;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}
body p {
  position: absolute;
  bottom: 10%;
  font-size: .7rem;
  color: #ffffff;
  opacity: .8;
  font-family: 'Quicksand', sans-serif;
  text-align: center;
  padding: 0 1rem;
}
body p a {
  color: currentcolor;
}

.scene {
  width: 100vmin;
  height: 100vmin;
  position: relative;
}
.scene div {
  position: absolute;
}
.scene svg {
  display: none;
}
.scene *:before,
.scene *:after {
  position: absolute;
  display: block;
  content: '';
}
.scene .sky {
  overflow: hidden;
  top: 18%;
  height: 30%;
  width: 100%;
}
.scene .sky:before, .scene .sky:after {
  width: 12%;
  height: 100%;
  z-index: 40;
}
.scene .sky:before {
  left: 0;
  background-image: linear-gradient(to right, #49befe 40%, rgba(255, 255, 255, 0));
}
.scene .sky:after {
  right: 0;
  background-image: linear-gradient(to left, #49befe 40%, rgba(255, 255, 255, 0));
}
.scene .bird {
  width: 40%;
  height: 45%;
  top: 51%;
  right: 50%;
  -webkit-transform: translate(50%, -50%) translateY(0) rotate(0deg);
          transform: translate(50%, -50%) translateY(0) rotate(0deg);
  will-change: transform;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-animation: fly 0.6s infinite cubic-bezier(0.39, 0.58, 0.57, 1);
          animation: fly 0.6s infinite cubic-bezier(0.39, 0.58, 0.57, 1);
}
@-webkit-keyframes fly {
  50% {
    -webkit-transform: translate(50%, -50%) translateY(4.5%) rotate(0.3deg);
            transform: translate(50%, -50%) translateY(4.5%) rotate(0.3deg);
  }
}
@keyframes fly {
  50% {
    -webkit-transform: translate(50%, -50%) translateY(4.5%) rotate(0.3deg);
            transform: translate(50%, -50%) translateY(4.5%) rotate(0.3deg);
  }
}
.sky__cloud-group {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  will-change: transform;
  -webkit-animation: clouds-group 5s linear infinite;
          animation: clouds-group 5s linear infinite;
}
@-webkit-keyframes clouds-group {
  to {
    -webkit-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
  }
}
@keyframes clouds-group {
  to {
    -webkit-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
  }
}
.sky__cloud-group:last-child {
  -webkit-transform: translate(100%, 0);
          transform: translate(100%, 0);
  -webkit-animation: clouds-second-group 5s linear infinite;
          animation: clouds-second-group 5s linear infinite;
}
@-webkit-keyframes clouds-second-group {
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes clouds-second-group {
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
.sky__cloud {
  width: 15%;
  height: 15%;
  background: #ffffff;
  right: 0;
  top: 15%;
  -webkit-transform: translate(50%, 0);
          transform: translate(50%, 0);
  border-radius: 100vw 100vw 40vw 40vw;
}
.sky__cloud:nth-child(1) {
  right: 10%;
}
.sky__cloud:nth-child(2) {
  right: 50%;
}
.sky__cloud:nth-child(3) {
  right: 90%;
  -webkit-transform: translate(50%, 10%) scale(0.9) scaleX(-1);
          transform: translate(50%, 10%) scale(0.9) scaleX(-1);
  -webkit-filter: FlipH;
          filter: FlipH;
}
.sky__cloud--bubbles {
  width: 40%;
  height: 150%;
  top: -50%;
  right: -4%;
  background: #ffffff;
  border-radius: 100vw;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.sky__cloud--bubbles:before {
  background: #ffffff;
  width: 130%;
  height: 120%;
  top: 38%;
  right: -21%;
  border-radius: 100vw;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.sky__cloud--small {
  top: 45%;
}
.sky__cloud--small:nth-child(4) {
  right: 30%;
  -webkit-transform: translate(50%, 40%) scale(0.7) scaleX(-1);
          transform: translate(50%, 40%) scale(0.7) scaleX(-1);
  -webkit-filter: FlipH;
          filter: FlipH;
}
.sky__cloud--small:nth-child(5) {
  right: 70%;
  -webkit-transform: translate(50%, 50%) scale(0.6);
          transform: translate(50%, 50%) scale(0.6);
}

.bird__head {
  width: 56%;
  height: 50%;
  right: 10%;
  top: 11%;
  z-index: 40;
}
.bird__head:after {
  width: 100.5%;
  height: 100%;
  right: 0;
  top: -1%;
  border-radius: 100% 100% 60% 0;
  background: #ffec00;
  z-index: 20;
}
.bird__head--hairs {
  width: 30%;
  height: 20%;
  left: 44%;
  top: -7%;
  display: block;
  z-index: 40;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 10% 10% 0 0;
  overflow: hidden;
}
.bird__head--hairs:before, .bird__head--hairs:after {
  width: 26%;
  height: 100%;
  background: #ffec00;
  top: 0;
  right: 0;
  -webkit-transform: translate(-70%, 7%) rotate(5deg);
          transform: translate(-70%, 7%) rotate(5deg);
  border-radius: 100vw 100vw 0 0;
}
.bird__head--hairs:after {
  -webkit-transform: translate(-185%, 0%) rotate(-32deg);
          transform: translate(-185%, 0%) rotate(-32deg);
}
.bird__head--reflection {
  top: -9%;
  left: 32%;
  -webkit-transform: rotate(-152deg);
          transform: rotate(-152deg);
  width: 50%;
  height: 66%;
  z-index: 40;
}
.bird__head--reflection--dot {
  width: 8.5%;
  height: 8.5%;
  background: #ffffff;
  top: 6%;
  left: 27%;
  border-radius: 50%;
  z-index: 40;
  -webkit-transform: translate(50%, 50%);
          transform: translate(50%, 50%);
}
.bird__head--reflection--dot:nth-of-type(1) {
  -webkit-transform: rotate(0deg) translate(1050%) rotate(1.75deg) rotate(0deg);
          transform: rotate(0deg) translate(1050%) rotate(1.75deg) rotate(0deg);
}
.bird__head--reflection--dot:nth-of-type(2) {
  -webkit-transform: rotate(1.75deg) translate(1050%) rotate(3.5deg) rotate(-1.75deg);
          transform: rotate(1.75deg) translate(1050%) rotate(3.5deg) rotate(-1.75deg);
}
.bird__head--reflection--dot:nth-of-type(3) {
  -webkit-transform: rotate(3.5deg) translate(1050%) rotate(5.25deg) rotate(-3.5deg);
          transform: rotate(3.5deg) translate(1050%) rotate(5.25deg) rotate(-3.5deg);
}
.bird__head--reflection--dot:nth-of-type(4) {
  -webkit-transform: rotate(5.25deg) translate(1050%) rotate(7deg) rotate(-5.25deg);
          transform: rotate(5.25deg) translate(1050%) rotate(7deg) rotate(-5.25deg);
}
.bird__head--reflection--dot:nth-of-type(5) {
  -webkit-transform: rotate(7deg) translate(1050%) rotate(8.75deg) rotate(-7deg);
          transform: rotate(7deg) translate(1050%) rotate(8.75deg) rotate(-7deg);
}
.bird__head--reflection--dot:nth-of-type(6) {
  -webkit-transform: rotate(8.75deg) translate(1050%) rotate(10.5deg) rotate(-8.75deg);
          transform: rotate(8.75deg) translate(1050%) rotate(10.5deg) rotate(-8.75deg);
}
.bird__head--reflection--dot:nth-of-type(7) {
  -webkit-transform: rotate(10.5deg) translate(1050%) rotate(12.25deg) rotate(-10.5deg);
          transform: rotate(10.5deg) translate(1050%) rotate(12.25deg) rotate(-10.5deg);
}
.bird__head--reflection--dot:nth-of-type(8) {
  -webkit-transform: rotate(12.25deg) translate(1050%) rotate(14deg) rotate(-12.25deg);
          transform: rotate(12.25deg) translate(1050%) rotate(14deg) rotate(-12.25deg);
}
.bird__head--reflection--dot:nth-of-type(9) {
  -webkit-transform: rotate(14deg) translate(1050%) rotate(15.75deg) rotate(-14deg);
          transform: rotate(14deg) translate(1050%) rotate(15.75deg) rotate(-14deg);
}
.bird__head--reflection--dot:nth-of-type(10) {
  -webkit-transform: rotate(15.75deg) translate(1050%) rotate(17.5deg) rotate(-15.75deg);
          transform: rotate(15.75deg) translate(1050%) rotate(17.5deg) rotate(-15.75deg);
}
.bird__head--reflection--dot:nth-of-type(11) {
  -webkit-transform: rotate(17.5deg) translate(1050%) rotate(19.25deg) rotate(-17.5deg);
          transform: rotate(17.5deg) translate(1050%) rotate(19.25deg) rotate(-17.5deg);
  opacity: 0;
}
.bird__head--reflection--dot:nth-of-type(12) {
  -webkit-transform: rotate(19.25deg) translate(1050%) rotate(21deg) rotate(-19.25deg);
          transform: rotate(19.25deg) translate(1050%) rotate(21deg) rotate(-19.25deg);
  opacity: 0;
}
.bird__head--reflection--dot:nth-of-type(13) {
  -webkit-transform: rotate(21deg) translate(1050%) rotate(22.75deg) rotate(-21deg);
          transform: rotate(21deg) translate(1050%) rotate(22.75deg) rotate(-21deg);
  opacity: 0;
}
.bird__head--reflection--dot:nth-of-type(14) {
  -webkit-transform: rotate(22.75deg) translate(1050%) rotate(24.5deg) rotate(-22.75deg);
          transform: rotate(22.75deg) translate(1050%) rotate(24.5deg) rotate(-22.75deg);
  opacity: 0;
}
.bird__head--reflection--dot:nth-of-type(15) {
  -webkit-transform: rotate(24.5deg) translate(1050%) rotate(26.25deg) rotate(-24.5deg);
          transform: rotate(24.5deg) translate(1050%) rotate(26.25deg) rotate(-24.5deg);
  opacity: 0;
}
.bird__head--reflection--dot:nth-of-type(16) {
  -webkit-transform: rotate(26.25deg) translate(1050%) rotate(28deg) rotate(-26.25deg);
          transform: rotate(26.25deg) translate(1050%) rotate(28deg) rotate(-26.25deg);
  opacity: 0;
}
.bird__head--reflection--dot:nth-of-type(17) {
  -webkit-transform: rotate(28deg) translate(1050%) rotate(29.75deg) rotate(-28deg);
          transform: rotate(28deg) translate(1050%) rotate(29.75deg) rotate(-28deg);
  opacity: 0;
}
.bird__head--reflection--dot:nth-of-type(18) {
  -webkit-transform: rotate(29.75deg) translate(1050%) rotate(31.5deg) rotate(-29.75deg);
          transform: rotate(29.75deg) translate(1050%) rotate(31.5deg) rotate(-29.75deg);
}
.bird__head--reflection--dot:nth-of-type(19) {
  -webkit-transform: rotate(31.5deg) translate(1050%) rotate(33.25deg) rotate(-31.5deg);
          transform: rotate(31.5deg) translate(1050%) rotate(33.25deg) rotate(-31.5deg);
}
.bird__head--reflection--dot:nth-of-type(20) {
  -webkit-transform: rotate(33.25deg) translate(1050%) rotate(35deg) rotate(-33.25deg);
          transform: rotate(33.25deg) translate(1050%) rotate(35deg) rotate(-33.25deg);
}
.bird__head--eye {
  width: 15%;
  height: 15%;
  right: 12%;
  background: black;
  z-index: 40;
  border-radius: 100vw;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
  -webkit-transform-origin: center center;
          transform-origin: center center;
  top: 31%;
  will-change: top, width, height;
  -webkit-animation: blink 10s forwards infinite;
          animation: blink 10s forwards infinite;
}
@-webkit-keyframes blink {
  0%, 4%, 15%, 20%, 30%, 34%, 39%, 43%, 60%, 64%, 100% {
    top: 31%;
    width: 15%;
    height: 15%;
  }
  2%, 18%, 32%, 41%, 62% {
    height: 1%;
    top: 44.5%;
  }
}
@keyframes blink {
  0%, 4%, 15%, 20%, 30%, 34%, 39%, 43%, 60%, 64%, 100% {
    top: 31%;
    width: 15%;
    height: 15%;
  }
  2%, 18%, 32%, 41%, 62% {
    height: 1%;
    top: 44.5%;
  }
}
.bird__head--spot {
  width: 14%;
  height: 14%;
  right: 38%;
  bottom: 35%;
  background: #f9b415;
  z-index: 40;
  border-radius: 50%;
}
.bird__head--beak {
  width: 40%;
  height: 40%;
  top: 0;
  right: 0;
  -webkit-transform: translate(32%, 82%) rotate(60deg);
          transform: translate(32%, 82%) rotate(60deg);
  border-radius: 17%;
  overflow: hidden;
  z-index: 10;
}
.bird__head--beak:before {
  width: 68%;
  height: 110%;
  background: #f17b00;
  top: 0;
  right: 0;
  border-radius: 1% 0 0 0;
  -webkit-transform: translate(-9%, -2%) rotate(60deg);
          transform: translate(-9%, -2%) rotate(60deg);
  z-index: 10;
}
.bird__body {
  width: 80.7%;
  height: 40%;
  right: 10%;
  top: 40.7%;
  overflow: hidden;
  border-radius: 5% 0 0 0;
  z-index: 30;
}
.bird__body:before {
  width: 100%;
  height: 190%;
  right: 0;
  top: -90%;
  border-radius: 7% 0 100% 100%;
  background-image: linear-gradient(-45deg, #f9b415 30%, #ffce00 60%);
}
.bird__body:after {
  background: #ffec00;
  top: -67%;
  width: 100%;
  height: 150%;
  border-radius: 0 100% 100% 100%;
}
.bird__wing {
  width: 35%;
  height: 20%;
  left: 31%;
  top: 45%;
  display: block;
  z-index: 40;
  -webkit-transform: translate(-50%, -50%) rotate(-8deg);
          transform: translate(-50%, -50%) rotate(-8deg);
  border-radius: 10% 10% 0 0;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  overflow: hidden;
  will-change: transform;
  -webkit-animation: wing 0.6s infinite cubic-bezier(0.39, 0.58, 0.57, 1);
          animation: wing 0.6s infinite cubic-bezier(0.39, 0.58, 0.57, 1);
}
@-webkit-keyframes wing {
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(15deg);
            transform: translate(-50%, -50%) rotate(15deg);
  }
}
@keyframes wing {
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(15deg);
            transform: translate(-50%, -50%) rotate(15deg);
  }
}
.bird__wing:before {
  width: 100%;
  height: 190%;
  right: 0;
  top: -90%;
  border-radius: 7% 0 100% 100%;
  background: #ffce00;
  content: '';
  display: block;
}
.bird__legs {
  width: 100%;
  height: 40%;
  bottom: 0;
  right: 0;
  left: 0;
}
.bird__leg {
  width: 7.5%;
  height: 50%;
  overflow: visible;
  z-index: 20;
}
.bird__leg:before, .bird__leg:after {
  width: 230%;
  height: 32%;
  bottom: 0;
  right: 0;
  border-radius: 100vw;
  -webkit-transform: translateX(30%);
          transform: translateX(30%);
}
.bird__leg:after {
  left: -45%;
}
.bird__leg--left {
  left: 50%;
  background: #dd6900;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  top: 50%;
  -webkit-transform: translate(-198%, -68%) rotate(40deg);
          transform: translate(-198%, -68%) rotate(40deg);
  -webkit-animation: legs-left 0.6s infinite ease-out;
          animation: legs-left 0.6s infinite ease-out;
}
@-webkit-keyframes legs-left {
  50% {
    -webkit-transform: translate(-198%, -68%) rotate(37deg);
            transform: translate(-198%, -68%) rotate(37deg);
  }
}
@keyframes legs-left {
  50% {
    -webkit-transform: translate(-198%, -68%) rotate(37deg);
            transform: translate(-198%, -68%) rotate(37deg);
  }
}
.bird__leg--left:before, .bird__leg--left:after {
  background: #dd6900;
}
.bird__leg--right {
  top: 50%;
  right: 50%;
  background: #f17b00;
  -webkit-transform: translate(-108%, -70%) rotate(40deg);
          transform: translate(-108%, -70%) rotate(40deg);
  -webkit-transform-origin: top center;
          transform-origin: top center;
  will-change: transform;
  -webkit-animation: legs-right 0.6s infinite ease-out;
          animation: legs-right 0.6s infinite ease-out;
}
@-webkit-keyframes legs-right {
  50% {
    -webkit-transform: translate(-108%, -70%) rotate(36deg);
            transform: translate(-108%, -70%) rotate(36deg);
  }
}
@keyframes legs-right {
  50% {
    -webkit-transform: translate(-108%, -70%) rotate(36deg);
            transform: translate(-108%, -70%) rotate(36deg);
  }
}
.bird__leg--right:before, .bird__leg--right:after {
  background: #f17b00;
}