Customize your CSS animations with Animista

Updated on November 04, 2023 View Times: 1219

Share on Twitter

Animations can be powerful tools for engaging and delighting visitors on your site. They can make the loading experience more entertaining, direct the visitor’s eye to an important element on the page, and improve usability.

Animations can be powerful tools for engaging and delighting visitors on your site. They can make the loading experience more entertaining, direct the visitor’s eye to an important element on the page, and improve usability.

Css Code

.box {
  width: 200px;
  height: 100px;
  background: pink;
  margin: 0 auto;
  margin-top: 20px;
}

.flip-scale-up-hor {
	-webkit-animation: flip-scale-up-hor 0.5s linear both;
	        animation: flip-scale-up-hor 0.5s linear both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-11-4 10:11:20
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-scale-up-hor
 * ----------------------------------------
 */
@-webkit-keyframes flip-scale-up-hor {
  0% {
    -webkit-transform: scale(1) rotateX(0);
            transform: scale(1) rotateX(0);
  }
  50% {
    -webkit-transform: scale(2.5) rotateX(-90deg);
            transform: scale(2.5) rotateX(-90deg);
  }
  100% {
    -webkit-transform: scale(1) rotateX(-180deg);
            transform: scale(1) rotateX(-180deg);
  }
}
@keyframes flip-scale-up-hor {
  0% {
    -webkit-transform: scale(1) rotateX(0);
            transform: scale(1) rotateX(0);
  }
  50% {
    -webkit-transform: scale(2.5) rotateX(-90deg);
            transform: scale(2.5) rotateX(-90deg);
  }
  100% {
    -webkit-transform: scale(1) rotateX(-180deg);
            transform: scale(1) rotateX(-180deg);
  }
}

preview

Share on Twitter
Catogery:Code