H5 of 13__CSS transitions, animations and transformations-H5 Tutorial-php.cn

H5 of 13__CSS transitions, animations and transformations

黄舟

Release： 2017-02-18 15:04:37

Original

2487 people have browsed it

1. Introduction

On touch devices, animation is the feedback of user gestures.

In all browsers, JS is executed in a single thread. If There are asynchronous tasks, such as setTimeOut(), which are added to the execution queue and then executed when the thread becomes idle.

#When the code in the timer is executed, other codes cannot be executed. That is to say, event handlers are executed in queue order.

#For these reasons, we should try to avoid using setTimeOut( ) animation, you can use CSS transition to achieve the same effect, and the experience is better.

2. Transition

CSS Transition can be done using CSS The simplest animation implemented. The power of transitions is that they are executed in a separate thread from the JS execution thread.

Using animations allows you to have a more dynamic interface and still keep event handlers running quickly.

An idea: Any CSS property that can be animated can be animated using a transition.

Changes in the value of an animated CSS property trigger animations. Use the CSS transition property to apply transitions.

The syntax is as follows:

transition: [property] [duration] [timing-function] [delay] ;

All values are optional.

For example: transition: color 1s ease-out, specifies a transition in which the color change gradually becomes slower within one second. Although the transition has now become the standard , but it still requires a prefix to be used in browsers with WebKit core.

No prefix is required in IE, Opera, and Firefox browsers.

Look at a piece of code, an example of hiding and showing an image when a button is touched, here are the fade-in and fade-out effects:

<body>
	<p id="touchme">
		<button class="button" id="toggle" style="width:100%; height:60px;">Toggle Picture</button>
		<p  class="picture hidden">
			<br/><br/>
			<a><img src="http://img1.2345.com/duoteimg/qqTxImg/2012/04/09/13339510584349.jpg"
					 width="320" height="256" alt="Goldfinch">
			</a>
		</p>
	</p>
</body>

Copy after login

Apply transition through CSS

/***应用过渡 ***/
.picture {
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  opacity: 1;
}
.picture.hidden {
  opacity: 0;
}

Copy after login

Look at the renderings:

#The complete html page is as follows:




	
	
	
	Touch
	

<body>
	<p id="touchme">
		<button class="button" id="toggle" style="width:100%; height:60px;">Toggle Picture</button>
		<p  class="picture hidden">
			<br/><br/>
			<a><img src="http://img1.2345.com/duoteimg/qqTxImg/2012/04/09/13339510584349.jpg"
					 width="320" height="256" alt="Goldfinch">
			</a>
		</p>
	</p>
</body>

Copy after login

The css file is as follows:

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  text-align: center;
}

.button {
  font-size: 16px;
  padding: 10px;
  font-weight: bold;
  border: 0;
  color: #fff;
  border-radius: 10px;
  box-shadow: inset 0px 1px 3px #fff, 0px 1px 2px #000;
  background: #ff3019;
  opacity: 1;
}

.active, .button:active {
  box-shadow: inset 0px 1px 3px #000, 0px 1px 2px #fff;
}

/***应用过渡 ***/
.picture {
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  opacity: 1;
}
.picture.hidden {
  opacity: 0;
}

Copy after login

The above is the content of H5-13__CSS transition, animation and transformation. For more related content, please pay attention to the PHP Chinese website (www.php. cn)!