Chrome Extension

CSS3 Animations

.container {
  animation-name: popin;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

/*THE ABOVE CODE IN SHORT FORMAT CAN BE WRITTEN IN SINGLE LINE*/
.container {
    animation: popin 5s linear 2s infinite reverse;
}

/* TO GENERATE ANIMATION WE USE KEYFRAMES */
@keyframes popin {
    from {
        transform: scale(0.8);
    }
    to {
        transform: scale(1.0);
    }
}

We have shown a basic example of animation which is used in CSS to animate elements.

Search history ×