Welcome to CSS3 HandsOn - Flying Bird- Create a CSS animation to make a flying bird effect as shown in above gif-HackerRank Fresco Play Solution

 

Create a CSS animation to make a flying bird effect as shown in above gif

- Use flex to align divs to your html.

- Use the background image and bird svg given to you in the directory.

- Create a sliding window effect to get the flapping effect of bird.

- fly-cycle animation should make the bird fly across the screen and fly-one-right should make the svg window move right.

Answer:

h1 {

  font-family: 'comic sans', cursive;

  font-size: 25px;

}

body,html{

  min-width:100%;

  min-height:100%;

  display: flex;

  align-items: center;

  justify-content: center;

}

.container {

  min-height: 30rem;

  min-width:50rem;

  background-size: cover;

  background-position: center center;

  overflow:hidden;

  position:relative;

  display: flex;

  align-items: center;

  justify-content: center;

  background-image:url(.*bg.jpg.*);

}

.bird {

  background-size: auto 100%;

  width: 88px;

  height: 125px;

  animation-timing-function: steps(10);

  animation-iteration-count: infinite;

  animation-duration: 1s;

  animation-delay: -0.5s;   

  background-image:url(.*bird-cells.svg.*);

  will-change:background-position;

  animation-name:fly-cycle;

}

.bird-container {

  top: 20%;

  left: -10%;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

  animation-duration: 15s;

  animation-delay: 0;

  position: absolute;

  will-change:transform;

  transform:scale(.*)translateX(.*);

  animation-name:fly-right-one;

}

@keyframes fly-cycle {  

  100% {

    background-position: -900px 0;

  }

}

@keyframes fly-right-one {

  

  0% {

    transform: scale(0.3) translateX(-10vw);

  }

  

  10% {

    transform: translateY(2vh) translateX(10vw) scale(0.4);

  }

  

  20% {

    transform: translateY(0vh) translateX(30vw) scale(0.5);

  }

  

  30% {

    transform: translateY(4vh) translateX(50vw) scale(0.6);

  }

  

  40% {

    transform: translateY(2vh) translateX(70vw) scale(0.6);

  }

  

  50% {

    transform: translateY(0vh) translateX(90vw) scale(0.6);

  }

  

  60% {

    transform: translateY(0vh) translateX(110vw) scale(0.6);

  }

  

  100% {

    transform: translateY(0vh) translateX(110vw) scale(0.6);

  }

  

}

@keyframes fly-right-two {

  

  0% {

    transform: translateY(-2vh) translateX(-10vw) scale(0.5);

  }

  

  10% {

    transform: translateY(0vh) translateX(10vw) scale(0.4);

  }

  

  20% {

    transform: translateY(-4vh) translateX(30vw) scale(0.6);

  }

  

  30% {

    transform: translateY(1vh) translateX(50vw) scale(0.45);

  }

  

  40% {

    transform: translateY(-2.5vh) translateX(70vw) scale(0.5);

  }

  

  50% {

    transform: translateY(0vh) translateX(90vw) scale(0.45);

  }

  

  51% {

    transform: translateY(0vh) translateX(110vw) scale(0.45);

  }

  

  100% {

    transform: translateY(0vh) translateX(110vw) scale(0.45);

  }

  

}

Click on the image for full view: