Interview Question: Create Animation using HTML5 & CSS3

In Front-End Developer interview, you will be asked to create animation example. Most of the websites use animation one way or other. It is very important to know css properties to create animation without adding Javascript or JQuery to show scalability of your code and experience.

Read On Dglobaltech:

Tailwind Css

Front-End Interview Questions

In this post we will go over different animations and how to easily use in existing websites.

In CSS3 we have “animation“ property which we can use to animate div.

The animation shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

Examples:

animation: slidein 3s linear 1s;

animation: flip 3s 2;

slidein and flip are animation names which we have to define using keyframe

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes flipY{
  from {
    -webkit-transform: rotateY(180deg);
  }
  to {
    -webkit-transform: rotateY(-180deg);
  }
}

Now, we will use animation and keyframe properties to animate div.

HTML Code:

<div class="flip-container">
   <div class="flipper">
      <div class="front">
         The front face
      </div>
      <div class="back">
         The back face
      </div>
      <div class="clear"></div>
   </div>
   <p>Horizontal Flip</p>
</div>

CSS3 Code:

.flip-container {
	-webkit-perspective: 1000;
	width: 400px;
}
.flipper {
	transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	position: relative;
	height: 200px;
}
.front,
.back {
	width: 400px;
	height: 200px;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-backface-visibility: hidden;
	color: #fff;
	text-shadow: 1px 1px #000;
	font-size: 2em;
	line-height: 200px;
	text-align: center;
}
.back {
	-webkit-transform: rotateY(180deg);
	background: #3498db;
}
.front {
	z-index: 2;
	background: #2ecc71;
}
.flip-container p {
	margin: 10px 0;
	text-align: center;
}
/* Flip Animation */
@keyframes flipX{
    from {
        -webkit-transform: rotateX(180deg);
    }
    
    to {
        -webkit-transform: rotateX(-180deg);
    }
    
}
@keyframes flipY{
    from {
        -webkit-transform: rotateY(180deg);
    }
    
    to {
        -webkit-transform: rotateY(-180deg);
    }
    
}
.flip-container .flipper {
	animation: flipY 3s 2;
}

Now, add all code together. Here is working code in code playground.