Learning and sharing of transition and 2D transformation in css3 and the realization of simple clock

Learning and sharing of transition and 2D transformation in css3 and the realization of simple clock

Hello everyone, here is the demo software park. Today I will share with you the transition and 2D transformation in css3. As we all know, css is extremely efficient, and the process of its change is often completed in an instant, and the speed is extremely fast.

CSS transition provides a way to control the speed of animation when changing CSS properties. It can make property changes a process that lasts for a period of time, rather than an immediate effect. For example, to change the color of an element from white to black, usually this change takes effect immediately. After using CSS transitions, the color of the element will gradually change from white to black, changing at a certain curve rate. This process can be self-defined.

There are the following attributes in the transition:

transition-property specifies the properties of the transition animation (note that not all properties can be animated)

transition-duration specifies the time of the transition animation (note that 0 must also bring a unit)

transition-timing-function specifies the form of transition animation (note Bezier)

transition-delay specifies the delay of the transition animation

The first value of transition that can be parsed as time will be assigned to transition-duration

The transtionend event (DOM2) will trigger this event when each property completes the transition

When the length of the attribute value list is inconsistent: a repeated list related to time, and the transition-timing-function uses the default value.

In addition to the above, the transition also needs to pay attention to the following more important pits:

  • Transition is only related to the initial state and end state of the element, there is no way to get the state of the element in each frame of the transition
  • There is no way to trigger the transition when the element is not finished for the first time.
  • When most of the transformation styles are switched, there is no way to trigger the transition when the number or position of the transformation combination is different.

The 2D transform (transform) attribute allows you to modify the coordinate space of the CSS visual format model. Note: the transform attribute is only effective for block-level elements!

rotate

translate

skew

scale

transform-origin base point transformation

It should be noted that the order of the transformation combination is from right to left, and the bottom layer of the transformation is actually the calculation of the matrix. Next, I will post a simple clock based on transition and transformation. The code is as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			ul{
				list-style: none;
			}
			
			#wrap{
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -100px;
				margin-top: -100px;
				width: 200px;
				height: 200px;
				border: 1px solid #55aa7f;
				border-radius:50% ;
			}
			ul > li{
				position: absolute;
				left: 99px;
				top: 0;
				width: 2px;
				height: 10px;
				background: #55aa7f;
				transform-origin:center 100px;
			}
			ul > li:nth-child(5n+1){
				height: 15px;
			}
			#wrap > .hour{
				position: absolute;
				left: 97px;
				top: 70px;
				width: 6px;
				height: 30px;
				background: #aaaa00;
				transform-origin: center bottom;
			}
			#wrap > .min{
				position: absolute;
				left: 98px;
				top: 50px;
				width: 4px;
				height: 50px;
				background: #003300;
				transform-origin: center bottom;
			}
			#wrap > .sec{
				position: absolute;
				left: 99px;
				top: 30px;
				width: 2px;
				height: 70px;
				background: red;
				transform-origin: center bottom;
			}
			#wrap > .icon{
				position: absolute;
				left: 90px;
				top: 90px;
				width: 20px;
				height: 20px;
				border-radius:50% ;
				background: #00AA88;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<ul>
			</ul>
			<div class="hour"></div>
			<div class="min"></div>
			<div class="sec"></div>
			<div class="icon"></div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var hourNode = document.querySelector("#wrap > .hour");
			var minNode = document.querySelector("#wrap > .min");
			var secNode = document.querySelector("#wrap > .sec");
			var ulNode = document.querySelector("#wrap > ul");
			var styleNode = document.createElement("style");
			var liHtml = "";
			var cssText="";
			for(var i=0;i<60;i++){
				liHtml+="<li></li>";
				cssText+="ul > li:nth-child("+(i+1)+"){transform: rotate("+(i*6)+"deg);}";
			}
			ulNode.innerHTML = liHtml;
			styleNode.innerHTML =cssText;
			document.head.appendChild(styleNode);
			move();
			setInterval(move,1000)
			function move(){
				var date = new Date();
				var s = date.getSeconds();
				var m = date.getMinutes()+s/60;
				var h = date.getHours()+m/60;
				hourNode.style.transform="rotate("+(30*h)+"deg)";
				minNode.style.transform="rotate("+(6*m)+"deg)";
				secNode.style.transform="rotate("+(6*s)+"deg)";
			}
		}
	</script>
</html>

 

Effect picture:

Well, that s all for today s sharing. Of course, there may be some mistakes. Hope you guys can correct me and communicate in the comment area. Thank you for taking the time to read!