Home > Article > Web Front-end > H5 of 13__CSS transitions, animations and transformations

H5 of 13__CSS transitions, animations and transformations

黄舟Original: 2017-02-18 15:04:372451browse

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>

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;
}

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>

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;
}

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)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：H5-12__Touch and click: basic event handlingNext article：H5-12__Touch and click: basic event handling

See more

H5 of 13__CSS transitions, animations and transformations

Related articles