Transition Demo

This is used to embed in my blog http://agelber.com/blog/transition-and-animation What is a transition demo How do you make a transition demo? This script and codes were developed by Assaf Gelber on 09 March 2022, Wednesday.

How do I make an transition demo?
  1. Transition Demo Previews
  2. Transition Demo HTML Codes
  3. Transition Demo CSS Codes
Transition Demo Previews

Transition Demo HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Transition Demo</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>


  
  
      <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! */
      @import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300';
body {
  overflow: hidden;
  font-family: Source Sans Pro;
  transform: translateZ(0);
}

#element {
  box-sizing: border-box;
  position: absolute;
  left: 250px;
  width: 100px;
  height: 100px;
  background: #387FF2;
  border: 3px solid #444;
  margin: 50px auto;
  transition: all 0.5s linear;
}
#element:hover {
  transform: rotate(180deg);
  background-color: #FFF;
}

.explanation {
  font-weight: bold;
  width: 200px;
}

    </style>

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

</head>

<body>
  <div id='element'></div>
<div class='explanation'>
  Hover over the square to see the transition.
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  
</body>
</html>

Transition Demo CSS Codes

@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300';
body {
  overflow: hidden;
  font-family: Source Sans Pro;
  transform: translateZ(0);
}

#element {
  box-sizing: border-box;
  position: absolute;
  left: 250px;
  width: 100px;
  height: 100px;
  background: #387FF2;
  border: 3px solid #444;
  margin: 50px auto;
  transition: all 0.5s linear;
}
#element:hover {
  transform: rotate(180deg);
  background-color: #FFF;
}

.explanation {
  font-weight: bold;
  width: 200px;
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.