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

Home

Web Front-end

H5 Tutorial

H5 of 13__CSS transitions, animations and transformations

黄舟

Feb 18, 2017 pm 03:04 PM

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="/static/imghwm/default1.png"  data-src="http://img1.2345.com/duoteimg/qqTxImg/2012/04/09/13339510584349.jpg"  class="lazy"  
					  style="max-width:90%" 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="/static/imghwm/default1.png"  data-src="http://img1.2345.com/duoteimg/qqTxImg/2012/04/09/13339510584349.jpg"  class="lazy"  
					  style="max-width:90%" 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

H5 vs. Older HTML Versions: A ComparisonMay 06, 2025 am 12:09 AM

The main differences between HTML5 (H5) and older versions of HTML include: 1) H5 introduces semantic tags, 2) supports multimedia content, and 3) provides offline storage functions. H5 enhances the functionality and expressiveness of web pages through new tags and APIs, such as and tags, improving user experience and SEO effects, but need to pay attention to compatibility issues.

H5 vs. HTML5: Clarifying the Terminology and RelationshipMay 05, 2025 am 12:02 AM

The difference between H5 and HTML5 is: 1) HTML5 is a web page standard that defines structure and content; 2) H5 is a mobile web application based on HTML5, suitable for rapid development and marketing.

HTML5 Features: The Core of H5May 04, 2025 am 12:05 AM

The core features of HTML5 include semantic tags, multimedia support, form enhancement, offline storage and local storage. 1. Semantic tags such as, improve code readability and SEO effect. 2. Multimedia support simplifies the process of embedding media content through and tags. 3. Form Enhancement introduces new input types and verification properties, simplifying form development. 4. Offline storage and local storage improve web page performance and user experience through ApplicationCache and localStorage.

H5: Exploring the Latest Version of HTMLMay 03, 2025 am 12:14 AM

HTML5isamajorrevisionoftheHTMLstandardthatrevolutionizeswebdevelopmentbyintroducingnewsemanticelementsandcapabilities.1)ItenhancescodereadabilityandSEOwithelementslike,,,and.2)HTML5enablesricher,interactiveexperienceswithoutplugins,allowingdirectembe

Beyond Basics: Advanced Techniques in H5 CodeMay 02, 2025 am 12:03 AM

Advanced tips for H5 include: 1. Use complex graphics to draw, 2. Use WebWorkers to improve performance, 3. Enhance user experience through WebStorage, 4. Implement responsive design, 5. Use WebRTC to achieve real-time communication, 6. Perform performance optimization and best practices. These tips help developers build more dynamic, interactive and efficient web applications.

H5: The Future of Web Content and DesignMay 01, 2025 am 12:12 AM

H5 (HTML5) will improve web content and design through new elements and APIs. 1) H5 enhances semantic tagging and multimedia support. 2) It introduces Canvas and SVG, enriching web design. 3) H5 works by extending HTML functionality through new tags and APIs. 4) Basic usage includes creating graphics using it, and advanced usage involves WebStorageAPI. 5) Developers need to pay attention to browser compatibility and performance optimization.

H5: New Features and Capabilities for Web DevelopmentApr 29, 2025 am 12:07 AM

H5 brings a number of new functions and capabilities, greatly improving the interactivity and development efficiency of web pages. 1. Semantic tags such as enhance SEO. 2. Multimedia support simplifies audio and video playback through and tags. 3. Canvas drawing provides dynamic graphics drawing tools. 4. Local storage simplifies data storage through localStorage and sessionStorage. 5. The geolocation API facilitates the development of location-based services.

H5: Key Improvements in HTML5Apr 28, 2025 am 12:26 AM

HTML5 brings five key improvements: 1. Semantic tags improve code clarity and SEO effects; 2. Multimedia support simplifies video and audio embedding; 3. Form enhancement simplifies verification; 4. Offline and local storage improves user experience; 5. Canvas and graphics functions enhance the visualization of web pages.

See all articles