CSS Transition, Transform, and Animation

In this example below you will see how to do a CSS Transition, Transform, and Animation with some HTML / CSS and Javascript

Small example looking a some simple CSS Transitions, Transforms, and Animation.

Thumbnail
This awesome code was written by adamaoc, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright adamaoc ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Transition, Transform, and Animation </title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  background: #e1e1e1;
}

.wrapper {
  background: #00695C;
  height: 100px;
}

.text {
  background: black;
  color: #4DB6AC;
  margin-top: 25px;
  height: 50px;
  padding: 10px 40px;
  width: 172px;
  float: left;
  animation: anima 2s;
  -webkit-animation: anima 2s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.call-box {
  -webkit-perspective: 800;
  width: 400px;
  height: 200px;
  position: relative;
  margin: 50px auto;
}

.call-box:hover .flip-box {
  -webkit-transform: rotatex(-180deg);
}

.call-box .flip-box {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}

.call-box .flip-box .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  z-index: 2;
  font-family: Georgia;
  font-size: 3em;
  text-align: center;
  line-height: 200px;
}

.call-box .flip-box .front {
  position: absolute;
  z-index: 1;
  background: black;
  color: #4DB6AC;
  cursor: pointer;
}

.call-box .flip-box .back {
  -webkit-transform: rotatex(-180deg);
  background: #00695C;
  color: #4DB6AC;
  cursor: pointer;
}

/*Animation Effect*/
@-webkit-keyframes anima {
  0% {
    margin-left: -170px;
    opacity: 0;
    -webkit-opacity: 0;
  }
  70% {
    margin-left: 15px;
    opacity: 1;
    -webkit-opacity: 1;
  }
  100% {
    margin-left: 0;
  }
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="wrapper">
  <div class="text">
    <h2>This is the text</h2>
  </div>
</div>  

<div class="call-box"> 
        <div class="flip-box"> 
            <div class="face front"> 
                Front
            </div> 
            <div class="face back"> 
                Back
            </div> 
        </div> 
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/adamaoc/css-transition-transform-and-animation-dwljz */
body {
  background: #e1e1e1;
}

.wrapper {
  background: #00695C;
  height: 100px;
}

.text {
  background: black;
  color: #4DB6AC;
  margin-top: 25px;
  height: 50px;
  padding: 10px 40px;
  width: 172px;
  float: left;
  animation: anima 2s;
  -webkit-animation: anima 2s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.call-box {
  -webkit-perspective: 800;
  width: 400px;
  height: 200px;
  position: relative;
  margin: 50px auto;
}

.call-box:hover .flip-box {
  -webkit-transform: rotatex(-180deg);
}

.call-box .flip-box {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}

.call-box .flip-box .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  z-index: 2;
  font-family: Georgia;
  font-size: 3em;
  text-align: center;
  line-height: 200px;
}

.call-box .flip-box .front {
  position: absolute;
  z-index: 1;
  background: black;
  color: #4DB6AC;
  cursor: pointer;
}

.call-box .flip-box .back {
  -webkit-transform: rotatex(-180deg);
  background: #00695C;
  color: #4DB6AC;
  cursor: pointer;
}

/*Animation Effect*/
@-webkit-keyframes anima {
  0% {
    margin-left: -170px;
    opacity: 0;
    -webkit-opacity: 0;
  }
  70% {
    margin-left: 15px;
    opacity: 1;
    -webkit-opacity: 1;
  }
  100% {
    margin-left: 0;
  }
}

Comments